<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/scripting.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:44 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=interactive-elements.html>← 4.11 Interactive elements</a> — <a href=index.html>Table of Contents</a> — <a href=canvas.html>4.12.5 The canvas element →</a></nav><ol class=toc><li id=toc-semantics><ol><li><a href=scripting.html#scripting-3><span class=secno>4.12</span> Scripting</a><ol><li><a href=scripting.html#the-script-element><span class=secno>4.12.1</span> The <code>script</code> element</a><ol><li><a href=scripting.html#script-processing-model><span class=secno>4.12.1.1</span> Processing model</a><li><a href=scripting.html#scriptingLanguages><span class=secno>4.12.1.2</span> Scripting languages</a><li><a href=scripting.html#restrictions-for-contents-of-script-elements><span class=secno>4.12.1.3</span> Restrictions for contents of <code>script</code> elements</a><li><a href=scripting.html#inline-documentation-for-external-scripts><span class=secno>4.12.1.4</span> Inline documentation for external scripts</a><li><a href=scripting.html#scriptTagXSLT><span class=secno>4.12.1.5</span> Interaction of <code>script</code> elements and XSLT</a></ol><li><a href=scripting.html#the-noscript-element><span class=secno>4.12.2</span> The <code>noscript</code> element</a><li><a href=scripting.html#the-template-element><span class=secno>4.12.3</span> The <code>template</code> element</a><ol><li><a href=scripting.html#template-XSLT-XPath><span class=secno>4.12.3.1</span> Interaction of <code>template</code> elements with XSLT and XPath</a></ol><li><a href=scripting.html#the-slot-element><span class=secno>4.12.4</span> The <code>slot</code> element</a></ol></ol></ol><h3 id=scripting-3><span class=secno>4.12</span> Scripting<a href=#scripting-3 class=self-link></a></h3>

  <p>Scripts allow authors to add interactivity to their documents.</p>

  <p>Authors are encouraged to use declarative alternatives to scripting where possible, as
  declarative mechanisms are often more maintainable, and many users disable scripting.</p>

  <div class=example>

   <p>For example, instead of using a script to show or hide a section to show more details, the
   <code id=scripting-3:the-details-element><a href=interactive-elements.html#the-details-element>details</a></code> element could be used.</p>

  </div>

  <p>Authors are also encouraged to make their applications degrade gracefully in the absence of
  scripting support.</p>

  <div class=example>

   <p>For example, if an author provides a link in a table header to dynamically resort the table,
   the link could also be made to function without scripts by requesting the sorted table from the
   server.</p>

  </div>


  <h4 id=the-script-element><span class=secno>4.12.1</span> The <dfn id=script data-dfn-type=element><code>script</code></dfn> element<a href=#the-script-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script title="The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.">Element/script</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement title="HTML <script> elements expose the HTMLScriptElement interface, which provides special properties and methods for manipulating the behavior and execution of <script> elements (beyond the inherited HTMLElement interface).">HTMLScriptElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-script-element:concept-element-categories>Categories</a>:<dd><a id=the-script-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dd><a id=the-script-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-script-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a href=dom.html#script-supporting-elements-2 id=the-script-element:script-supporting-elements-2>Script-supporting element</a>.<dt><a href=dom.html#concept-element-contexts id=the-script-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-script-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>Where <a id=the-script-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dd>Where <a id=the-script-element:script-supporting-elements-2-2 href=dom.html#script-supporting-elements-2>script-supporting elements</a> are expected.<dt><a href=dom.html#concept-element-content-model id=the-script-element:concept-element-content-model>Content model</a>:<dd>If there is no <code id=the-script-element:attr-script-src><a href=#attr-script-src>src</a></code>
   attribute, depends on the value of the <code id=the-script-element:attr-script-type><a href=#attr-script-type>type</a></code> attribute, but must match
   <a href=#restrictions-for-contents-of-script-elements id=the-script-element:restrictions-for-contents-of-script-elements>script content restrictions</a>.<dd>If there <em>is</em> a <code id=the-script-element:attr-script-src-2><a href=#attr-script-src>src</a></code>
   attribute, the element must be either empty or contain only
   <a href=#inline-documentation-for-external-scripts id=the-script-element:inline-documentation-for-external-scripts>script documentation</a> that also matches <a href=#restrictions-for-contents-of-script-elements id=the-script-element:restrictions-for-contents-of-script-elements-2>script
   content restrictions</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-script-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-script-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-script-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-script-element:attr-script-type-2><a href=#attr-script-type>type</a></code> —  Type of script
     <dd><code id=the-script-element:attr-script-src-3><a href=#attr-script-src>src</a></code> —  Address of the resource
     <dd><code id=the-script-element:attr-script-nomodule><a href=#attr-script-nomodule>nomodule</a></code> —  Prevents execution in user agents that support <a href=webappapis.html#module-script id=the-script-element:module-script>module scripts</a>
     <dd><code id=the-script-element:attr-script-async><a href=#attr-script-async>async</a></code> —  Execute script when available, without blocking while fetching
     <dd><code id=the-script-element:attr-script-defer><a href=#attr-script-defer>defer</a></code> —  Defer script execution
     <dd><code id=the-script-element:attr-script-blocking><a href=#attr-script-blocking>blocking</a></code> —  Whether the element is <a id=the-script-element:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>
     <dd><code id=the-script-element:attr-script-crossorigin><a href=#attr-script-crossorigin>crossorigin</a></code> —  How the element handles crossorigin requests
     <dd><code id=the-script-element:attr-script-referrerpolicy><a href=#attr-script-referrerpolicy>referrerpolicy</a></code> —  <a id=the-script-element:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>Referrer policy</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-script-element:concept-fetch data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dd><code id=the-script-element:attr-script-integrity><a href=#attr-script-integrity>integrity</a></code> —  Integrity metadata used in <cite>Subresource Integrity</cite> checks <a href=references.html#refsSRI>[SRI]</a>
     <dd><code id=the-script-element:attr-script-fetchpriority><a href=#attr-script-fetchpriority>fetchpriority</a></code> —  Sets the <a href=https://fetch.spec.whatwg.org/#request-priority id=the-script-element:concept-request-priority data-x-internal=concept-request-priority>priority</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-script-element:concept-fetch-2 data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-script-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-script>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-script>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-script-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlscriptelement' data-dfn-type='interface'><c- g>HTMLScriptElement</c-></dfn> : <a id='the-script-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-script-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-script-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-script-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLScriptElement' id='dom-script-type' data-dfn-type='attribute'><c- g>type</c-></dfn>;
  [<a id='the-script-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflecturl' id='the-script-element:xattr-reflecturl'><c- g>ReflectURL</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLScriptElement' id='dom-script-src' data-dfn-type='attribute'><c- g>src</c-></dfn>;
  [<a id='the-script-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-script-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLScriptElement' id='dom-script-nomodule' data-dfn-type='attribute'><c- g>noModule</c-></dfn>;
  [<a id='the-script-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <a href='#dom-script-async' id='the-script-element:dom-script-async'><c- g>async</c-></a>;
  [<a id='the-script-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-script-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLScriptElement' id='dom-script-defer' data-dfn-type='attribute'><c- g>defer</c-></dfn>;
  [<c- g>SameObject</c->, <c- g>PutForwards</c->=<a href='https://dom.spec.whatwg.org/#dom-domtokenlist-value' id='the-script-element:dom-domtokenlist-value' data-x-internal='dom-domtokenlist-value'><c- n>value</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-script-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-script-element:domtokenlist' href='https://dom.spec.whatwg.org/#interface-domtokenlist' data-x-internal='domtokenlist'><c- n>DOMTokenList</c-></a> <dfn data-dfn-for='HTMLScriptElement' id='dom-script-blocking' data-dfn-type='attribute'><c- g>blocking</c-></dfn>;
  [<a id='the-script-element:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c->? <a href='#dom-script-crossorigin' id='the-script-element:dom-script-crossorigin'><c- g>crossOrigin</c-></a>;
  [<a id='the-script-element:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-script-referrerpolicy' id='the-script-element:dom-script-referrerpolicy'><c- g>referrerPolicy</c-></a>;
  [<a id='the-script-element:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-script-element:xattr-reflect-5'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLScriptElement' id='dom-script-integrity' data-dfn-type='attribute'><c- g>integrity</c-></dfn>;
  [<a id='the-script-element:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-script-fetchpriority' id='the-script-element:dom-script-fetchpriority'><c- g>fetchPriority</c-></a>;

  [<a id='the-script-element:cereactions-10' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-script-text' id='the-script-element:dom-script-text'><c- g>text</c-></a>;

  <c- b>static</c-> <c- b>boolean</c-> <a href='#dom-script-supports' id='the-script-element:dom-script-supports'><c- g>supports</c-></a>(<c- b>DOMString</c-> <c- g>type</c->);

  // <a href='obsolete.html#HTMLScriptElement-partial'>also has obsolete members</a>
};</code></pre>
   </dl>

  <p>The <code id=the-script-element:the-script-element><a href=#the-script-element>script</a></code> element allows authors to include dynamic script, instructions to the
  user agent, and data blocks in their documents. The element does not <a href=dom.html#represents id=the-script-element:represents>represent</a> content for the user.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type title="The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.">Element/script#attr-type</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>≤4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The script element has two core attributes. The <dfn data-dfn-for=script id=attr-script-type data-dfn-type=element-attr><code>type</code></dfn> attribute allows customization of the type of script
  represented:</p>

  <ul><li><p>Omitting the attribute, setting it to the empty string, or setting it to a
    <a id=the-script-element:javascript-mime-type-essence-match href=https://mimesniff.spec.whatwg.org/#javascript-mime-type-essence-match data-x-internal=javascript-mime-type-essence-match>JavaScript MIME type essence match</a> means that the script is a <a id=the-script-element:classic-script href=webappapis.html#classic-script>classic
    script</a>, to be interpreted according to the JavaScript <i id=the-script-element:js-prod-script><a data-x-internal=js-prod-script href=https://tc39.es/ecma262/#prod-Script>Script</a></i> top-level production. Authors should omit the <code id=the-script-element:attr-script-type-3><a href=#attr-script-type>type</a></code> attribute instead of redundantly setting it.<li><p>Setting the attribute to an <a id=the-script-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code>module</code>" means that the script is a <a id=the-script-element:javascript-module-script href=webappapis.html#javascript-module-script>JavaScript module script</a>, to
    be interpreted according to the JavaScript <i id=the-script-element:js-prod-module><a data-x-internal=js-prod-module href=https://tc39.es/ecma262/#prod-Module>Module</a></i> top-level
    production.<li><p>Setting the attribute to an <a id=the-script-element:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code>importmap</code>" means that the script is an <a id=the-script-element:import-map href=webappapis.html#import-map>import map</a>, containing
    JSON that will be used to control the behavior of <a href=webappapis.html#resolve-a-module-specifier id=the-script-element:resolve-a-module-specifier>module specifier resolution</a>.<li><p>Setting the attribute to an <a id=the-script-element:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for "<code>speculationrules</code>" means that the script defines a <a id=the-script-element:speculation-rule-set href=speculative-loading.html#speculation-rule-set>speculation rule
    set</a>, containing JSON that will be used to describe <a href=speculative-loading.html#speculative-loading>speculative loads</a>.<li>
     <p>Setting the attribute to any other value means that the script is a <dfn id=data-block>data block</dfn>,
     which is not processed by the user agent, but instead by author script or other tools. Authors
     must use a <a id=the-script-element:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type string</a> that is not a <a id=the-script-element:javascript-mime-type-essence-match-2 href=https://mimesniff.spec.whatwg.org/#javascript-mime-type-essence-match data-x-internal=javascript-mime-type-essence-match>JavaScript MIME type essence
     match</a> to denote data blocks.</p>

     <p class=note>The requirement that <a href=#data-block id=the-script-element:data-block>data blocks</a>
     must be denoted using a <a id=the-script-element:valid-mime-type-string-2 href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type string</a> is in place to
     avoid potential future collisions. Values for the <code id=the-script-element:attr-script-type-4><a href=#attr-script-type>type</a></code>
     attribute that are not MIME types, like "<code>module</code>" or "<code>importmap</code>", are used by the standard to denote types of scripts which have
     special behavior in user agents. By using a valid MIME type string now, you ensure that your
     data block will not ever be reinterpreted as a different script type, even in future user
     agents.</p>
    </ul>

  <p>The second core attribute is the <dfn data-dfn-for=script id=attr-script-src data-dfn-type=element-attr><code>src</code></dfn> attribute. It must only be specified for <a href=webappapis.html#classic-script id=the-script-element:classic-script-2>classic scripts</a> and <a href=webappapis.html#javascript-module-script id=the-script-element:javascript-module-script-2>JavaScript module scripts</a>, and denotes that instead of using the element's
  <a id=the-script-element:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> as the script content, the script will be fetched from the
  specified <a id=the-script-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a>. If <code id=the-script-element:attr-script-src-4><a href=#attr-script-src>src</a></code> is specified, it must be
  a <a id=the-script-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>.</p>

  <p>Which other attributes may be specified on a given <code id=the-script-element:the-script-element-2><a href=#the-script-element>script</a></code> element is determined by
  the following table:</p>

  <table class=yesno><thead><tr><th><th><code id=the-script-element:attr-script-nomodule-2><a href=#attr-script-nomodule>nomodule</a></code>
     <th><code id=the-script-element:attr-script-async-2><a href=#attr-script-async>async</a></code>
     <th><code id=the-script-element:attr-script-defer-2><a href=#attr-script-defer>defer</a></code>
     <th><code id=the-script-element:attr-script-blocking-2><a href=#attr-script-blocking>blocking</a></code>
     <th><code id=the-script-element:attr-script-crossorigin-2><a href=#attr-script-crossorigin>crossorigin</a></code>
     <th><code id=the-script-element:attr-script-referrerpolicy-2><a href=#attr-script-referrerpolicy>referrerpolicy</a></code>
     <th><code id=the-script-element:attr-script-integrity-2><a href=#attr-script-integrity>integrity</a></code>
     <th><code id=the-script-element:attr-script-fetchpriority-2><a href=#attr-script-fetchpriority>fetchpriority</a></code>
   <tbody><tr><th>External classic scripts<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<tr><th>Inline classic scripts<td class=yes>Yes<td class=no>·<td class=no>·<td class=no>·<td class=yes>Yes*<td class=yes>Yes*<td class=no>·<td class=no>·†<tr><th>External module scripts<td class=no>·<td class=yes>Yes<td class=no>·<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<td class=yes>Yes<tr><th>Inline module scripts<td class=no>·<td class=yes>Yes<td class=no>·<td class=no>·<td class=yes>Yes*<td class=yes>Yes*<td class=no>·<td class=no>·†<tr><th>Import maps<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<tr><th>Speculation rules<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<tr><th>Data blocks<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·<td class=no>·</table>

  <p class=tablenote><small>* Although inline scripts have no initial fetches, the <code id=the-script-element:attr-script-crossorigin-3><a href=#attr-script-crossorigin>crossorigin</a></code> and <code id=the-script-element:attr-script-referrerpolicy-3><a href=#attr-script-referrerpolicy>referrerpolicy</a></code> attribute on inline scripts affects the
  <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=the-script-element:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials mode</a> and <a id=the-script-element:referrer-policy-2 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer
  policy</a> used by module imports, including dynamic <code id=the-script-element:import()><a data-x-internal=import() href=https://tc39.es/ecma262/#sec-import-calls>import()</a></code>.</small></p>

  <p class=tablenote><small>† Unlike <code id=the-script-element:attr-script-crossorigin-4><a href=#attr-script-crossorigin>crossorigin</a></code> and <code id=the-script-element:attr-script-referrerpolicy-4><a href=#attr-script-referrerpolicy>referrerpolicy</a></code>, <code id=the-script-element:attr-script-fetchpriority-3><a href=#attr-script-fetchpriority>fetchpriority</a></code> does not affect module imports. See some discussion in <a href=https://github.com/whatwg/html/issues/10276>issue #10276</a>.</small></p>

  <hr>

  <p>The contents of inline <code id=the-script-element:the-script-element-3><a href=#the-script-element>script</a></code> elements, or the external script resource, must
  conform with the requirements of the JavaScript specification's <i id=the-script-element:js-prod-script-2><a data-x-internal=js-prod-script href=https://tc39.es/ecma262/#prod-Script>Script</a></i> or <i id=the-script-element:js-prod-module-2><a data-x-internal=js-prod-module href=https://tc39.es/ecma262/#prod-Module>Module</a></i> productions, for <a href=webappapis.html#classic-script id=the-script-element:classic-script-3>classic scripts</a> and <a href=webappapis.html#javascript-module-script id=the-script-element:javascript-module-script-3>JavaScript module scripts</a> respectively. <a href=references.html#refsJAVASCRIPT>[JAVASCRIPT]</a></p>

  <p>The contents of inline <code id=the-script-element:the-script-element-4><a href=#the-script-element>script</a></code> elements for <a href=webappapis.html#import-map id=the-script-element:import-map-2>import
  maps</a> must conform with the <a id=the-script-element:import-map-authoring-requirements href=webappapis.html#import-map-authoring-requirements>import map authoring requirements</a>.</p>

  <p>The contents of inline <code id=the-script-element:the-script-element-5><a href=#the-script-element>script</a></code> elements for <a href=speculative-loading.html#speculation-rule-set id=the-script-element:speculation-rule-set-2>speculation rule sets</a> must conform with the <a id=the-script-element:speculation-rule-set-authoring-requirements href=speculative-loading.html#speculation-rule-set-authoring-requirements>speculation rule set authoring
  requirements</a>.</p>

  <p>When used to include <a href=#data-block id=the-script-element:data-block-2>data blocks</a>, the data must be embedded
  inline, the format of the data must be given using the <code id=the-script-element:attr-script-type-5><a href=#attr-script-type>type</a></code>
  attribute, and the contents of the <code id=the-script-element:the-script-element-6><a href=#the-script-element>script</a></code> element must conform to the requirements
  defined for the format used.</p>

  <hr>

  <p>The <dfn data-dfn-for=script id=attr-script-nomodule data-dfn-type=element-attr><code>nomodule</code></dfn>
  attribute is a <a id=the-script-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a> that prevents a script from being executed in user
  agents that support <a href=webappapis.html#module-script id=the-script-element:module-script-2>module scripts</a>. This allows selective
  execution of <a href=webappapis.html#module-script id=the-script-element:module-script-3>module scripts</a> in modern user agents and <a href=webappapis.html#classic-script id=the-script-element:classic-script-4>classic scripts</a> in older user agents, <a href=#script-nomodule-example>as shown below</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async title="The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.">Element/script#attr-async</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>≤4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer title="The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.">Element/script#attr-defer</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>4+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=script id=attr-script-async data-dfn-type=element-attr><code>async</code></dfn> and
  <dfn data-dfn-for=script id=attr-script-defer data-dfn-type=element-attr><code>defer</code></dfn> attributes are
  <a href=common-microsyntaxes.html#boolean-attribute id=the-script-element:boolean-attribute-2>boolean attributes</a> that indicate how the script should be
  evaluated. There are several possible modes that can be selected using these attributes, depending
  on the script's type.</p>

  <p>For external <a href=webappapis.html#classic-script id=the-script-element:classic-script-5>classic scripts</a>, if the <code id=the-script-element:attr-script-async-3><a href=#attr-script-async>async</a></code> attribute is present, then the classic script will be
  fetched <a id=the-script-element:in-parallel href=infrastructure.html#in-parallel>in parallel</a> to parsing and evaluated as soon as it is available (potentially
  before parsing completes). If the <code id=the-script-element:attr-script-async-4><a href=#attr-script-async>async</a></code> attribute is not
  present but the <code id=the-script-element:attr-script-defer-3><a href=#attr-script-defer>defer</a></code> attribute is present, then the
  classic script will be fetched <a id=the-script-element:in-parallel-2 href=infrastructure.html#in-parallel>in parallel</a> and evaluated when the page has finished
  parsing. If neither attribute is present, then the script is fetched and evaluated immediately,
  blocking parsing until these are both complete.</p>

  <p>For <a href=webappapis.html#module-script id=the-script-element:module-script-4>module scripts</a>, if the <code id=the-script-element:attr-script-async-5><a href=#attr-script-async>async</a></code> attribute is present, then the module script and all its
  dependencies will be fetched <a id=the-script-element:in-parallel-3 href=infrastructure.html#in-parallel>in parallel</a> to parsing, and the module script will
  be evaluated as soon as it is available (potentially before parsing completes). Otherwise, the
  module script and its dependencies will be fetched <a id=the-script-element:in-parallel-4 href=infrastructure.html#in-parallel>in parallel</a> to parsing and
  evaluated when the page has finished parsing. (The <code id=the-script-element:attr-script-defer-4><a href=#attr-script-defer>defer</a></code>
  attribute has no effect on module scripts.)</p>

  <p>This is all summarized in the following schematic diagram:</p>

  <p><img class=darkmode-aware src=/images/asyncdefer.svg alt="With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing but once it finishes parsing is interrupted to execute the script. The story for <script type=&quot;module&quot;> is similar to <script defer>, but the dependencies will be fetched as well, and the story for <script type=&quot;module&quot; async> is similar to <script async> with the extra dependency fetching." style="width: 80%; min-width: 820px;"></p>

  <p class=note>The exact processing details for these attributes are, for mostly
  historical reasons, somewhat non-trivial, involving a number of aspects of HTML. The
  implementation requirements are therefore by necessity scattered throughout the specification. The
  algorithms <a href=#script-processing-model>below</a> describe the core of this processing, but
  these algorithms reference and are referenced by the parsing rules for <code id=the-script-element:the-script-element-7><a href=#the-script-element>script</a></code> <a href=parsing.html#scriptTag>start</a> and <a href=parsing.html#scriptEndTag>end</a> tags in HTML, <a href=parsing.html#scriptForeignEndTag>in foreign content</a>, and <a href=xhtml.html#scriptTagXML>in XML</a>, the
  rules for the <code id=the-script-element:dom-document-write><a href=dynamic-markup-insertion.html#dom-document-write>document.write()</a></code> method, the handling of <a href=webappapis.html#scripting>scripting</a>, etc.</p>

  <p class=note>When inserted using the <code id=the-script-element:dom-document-write-2><a href=dynamic-markup-insertion.html#dom-document-write>document.write()</a></code>
  method, <code id=the-script-element:the-script-element-8><a href=#the-script-element>script</a></code> elements <a href=parsing.html#document-written-scripts-intervention>usually</a>
  execute (typically blocking further script execution or HTML parsing). When inserted using the
  <code id=the-script-element:dom-element-innerhtml><a href=dynamic-markup-insertion.html#dom-element-innerhtml>innerHTML</a></code> and <code id=the-script-element:dom-element-outerhtml><a href=dynamic-markup-insertion.html#dom-element-outerhtml>outerHTML</a></code> attributes, they do not execute at all.</p>

  <p>The <code id=the-script-element:attr-script-defer-5><a href=#attr-script-defer>defer</a></code> attribute may be specified even if the <code id=the-script-element:attr-script-async-6><a href=#attr-script-async>async</a></code> attribute is specified, to cause legacy web browsers that
  only support <code id=the-script-element:attr-script-defer-6><a href=#attr-script-defer>defer</a></code> (and not <code id=the-script-element:attr-script-async-7><a href=#attr-script-async>async</a></code>) to fall back to the <code id=the-script-element:attr-script-defer-7><a href=#attr-script-defer>defer</a></code> behavior instead of the blocking behavior that
  is the default.</p>

  <p>The <dfn data-dfn-for=script id=attr-script-blocking data-dfn-type=element-attr><code>blocking</code></dfn>
  attribute is a <a id=the-script-element:blocking-attribute href=urls-and-fetching.html#blocking-attribute>blocking attribute</a>.</p>

  <p>The <dfn data-dfn-for=script id=attr-script-crossorigin data-dfn-type=element-attr><code>crossorigin</code></dfn> attribute is a <a id=the-script-element:cors-settings-attribute href=urls-and-fetching.html#cors-settings-attribute>CORS settings
  attribute</a>. For external <a href=webappapis.html#classic-script id=the-script-element:classic-script-6>classic scripts</a>, it controls
  whether error information will be exposed, when the script is obtained from other <a href=browsers.html#concept-origin id=the-script-element:concept-origin>origins</a>. For external <a href=webappapis.html#module-script id=the-script-element:module-script-5>module scripts</a>,
  it controls the <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=the-script-element:concept-request-credentials-mode-2 data-x-internal=concept-request-credentials-mode>credentials mode</a> used for
  the initial fetch of the module source, if cross-origin. For both <a href=webappapis.html#classic-script id=the-script-element:classic-script-7>classic</a> and <a href=webappapis.html#module-script id=the-script-element:module-script-6>module scripts</a>, it controls the
  <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=the-script-element:concept-request-credentials-mode-3 data-x-internal=concept-request-credentials-mode>credentials mode</a> used for cross-origin
  module imports.</p>

  <p class=note>Unlike <a href=webappapis.html#classic-script id=the-script-element:classic-script-8>classic scripts</a>, <a href=webappapis.html#module-script id=the-script-element:module-script-7>module scripts</a> require the use of the <a href=https://fetch.spec.whatwg.org/#http-cors-protocol id=the-script-element:cors-protocol data-x-internal=cors-protocol>CORS protocol</a> for cross-origin fetching.</p>

  <p>The <dfn data-dfn-for=script id=attr-script-referrerpolicy data-dfn-type=element-attr><code>referrerpolicy</code></dfn> attribute is a <a id=the-script-element:referrer-policy-attribute href=urls-and-fetching.html#referrer-policy-attribute>referrer
  policy attribute</a>. Its sets the <a id=the-script-element:referrer-policy-3 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a> used for the initial fetch of
  an external script, as well as the fetching of any imported module scripts.
  <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

  <div class=example>
   <p>An example of a <code id=the-script-element:the-script-element-9><a href=#the-script-element>script</a></code> element's referrer policy being used when fetching
   imported scripts but not other subresources:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>referrerpolicy</c-><c- o>=</c-><c- s>&quot;origin&quot;</c-><c- p>&gt;</c->
  fetch<c- p>(</c-><c- t>&apos;/api/data&apos;</c-><c- p>);</c->    <c- c1>// not fetched with &lt;script&gt;&apos;s referrer policy</c->
  <c- k>import</c-><c- p>(</c-><c- t>&apos;./utils.mjs&apos;</c-><c- p>);</c-> <c- c1>// is fetched with &lt;script&gt;&apos;s referrer policy (&quot;origin&quot; in this case)</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>The <dfn data-dfn-for=script id=attr-script-integrity data-dfn-type=element-attr><code>integrity</code></dfn>
  attribute sets the <a href=https://fetch.spec.whatwg.org/#concept-request-integrity-metadata id=the-script-element:concept-request-integrity-metadata data-x-internal=concept-request-integrity-metadata>integrity metadata</a>
  used for the initial fetch of an external script. The value must match <a id=the-script-element:the-requirements-of-the-integrity-attribute href=https://w3c.github.io/webappsec-subresource-integrity/#the-integrity-attribute data-x-internal=the-requirements-of-the-integrity-attribute>the requirements of
  the integrity attribute</a>. <a href=references.html#refsSRI>[SRI]</a></p>

  <p>The <dfn data-dfn-for=script id=attr-script-fetchpriority data-dfn-type=element-attr><code>fetchpriority</code></dfn> attribute is a <a id=the-script-element:fetch-priority-attribute href=urls-and-fetching.html#fetch-priority-attribute>fetch priority
  attribute</a>. Its sets the <a href=https://fetch.spec.whatwg.org/#request-priority id=the-script-element:concept-request-priority-2 data-x-internal=concept-request-priority>priority</a> used for
  the initial fetch of an external script.</p>

  <p>Changing any of these attributes dynamically has no direct effect; these attributes are only
  used at specific times described in the <a href=#script-processing-model>processing model</a>.</p>

  <hr>

  

  <p>The <dfn data-dfn-for=HTMLScriptElement id=dom-script-crossorigin data-dfn-type=attribute><code>crossOrigin</code></dfn> IDL attribute must <a id=the-script-element:reflect href=common-dom-interfaces.html#reflect>reflect</a>
  the <code id=the-script-element:attr-script-crossorigin-5><a href=#attr-script-crossorigin>crossorigin</a></code> content attribute, <a id=the-script-element:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to
  only known values</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/referrerPolicy title="The referrerPolicy property of the HTMLScriptElement interface reflects the HTML referrerpolicy of the <script> element, which defines how the referrer is set when fetching the script and any scripts it imports.">HTMLScriptElement/referrerPolicy</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>65+</span></span><span class="safari yes"><span>Safari</span><span>14+</span></span><span class="chrome yes"><span>Chrome</span><span>70+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLScriptElement id=dom-script-referrerpolicy data-dfn-type=attribute><code>referrerPolicy</code></dfn> IDL attribute must
  <a id=the-script-element:reflect-2 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-script-element:attr-script-referrerpolicy-5><a href=#attr-script-referrerpolicy>referrerpolicy</a></code> content
  attribute, <a id=the-script-element:limited-to-only-known-values-2 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>The <dfn data-dfn-for=HTMLScriptElement id=dom-script-fetchpriority data-dfn-type=attribute><code>fetchPriority</code></dfn> IDL attribute must
  <a id=the-script-element:reflect-3 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-script-element:attr-script-fetchpriority-4><a href=#attr-script-fetchpriority>fetchpriority</a></code>
  content attribute, <a id=the-script-element:limited-to-only-known-values-3 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>The <dfn data-dfn-for=HTMLScriptElement id=dom-script-async data-dfn-type=attribute><code>async</code></dfn>
  getter steps are:</p>

  <ol><li><p>If <a id=the-script-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#script-force-async id=the-script-element:script-force-async>force async</a> is true, then
   return true.<li><p>If <a id=the-script-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=the-script-element:attr-script-async-8><a href=#attr-script-async>async</a></code> content attribute is
   present, then return true.<li><p>Return false.</ol>

  <p>The <code id=the-script-element:dom-script-async-2><a href=#dom-script-async>async</a></code> setter steps are:</p>

  <ol><li><p>Set <a id=the-script-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#script-force-async id=the-script-element:script-force-async-2>force async</a> to
   false.<li><p>If the given value is true, then set <a id=the-script-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=the-script-element:attr-script-async-9><a href=#attr-script-async>async</a></code> content attribute to the empty string.<li><p>Otherwise, remove <a id=the-script-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <code id=the-script-element:attr-script-async-10><a href=#attr-script-async>async</a></code>
   content attribute.</ol>

  

  <dl class=domintro><dt><code><var>script</var>.<a href=#dom-script-text id=dom-script-text-dev>text</a> [ = <var>value</var> ]</code><dd>
    <p>Returns the <a id=the-script-element:child-text-content-2 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of the element.</p>
   <dt><code><var>script</var>.<a href=#dom-script-text id=the-script-element:dom-script-text-2>text</a> = <var>value</var></code><dd>
    <p>Replaces the element's children with the text given by <var>value</var>.</p>
   <dt><code><code id=the-script-element:htmlscriptelement><a href=#htmlscriptelement>HTMLScriptElement</a></code>.<a href=#dom-script-supports id=dom-script-supports-dev>supports</a>(<var>type</var>)</code><dd>
    <p>Returns true if the given <var>type</var> is a script type supported by the user agent. The
    possible script types in this specification are "<code>classic</code>", "<code>module</code>", and "<code>importmap</code>", but others might be added in
    the future.</p>
   </dl>

  

  <p>The <dfn data-dfn-for=HTMLScriptElement id=dom-script-text data-dfn-type=attribute><code>text</code></dfn>
  getter steps are to return <a id=the-script-element:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-script-element:child-text-content-3 href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a>.</p>

  <p>The <code id=the-script-element:dom-script-text-3><a href=#dom-script-text>text</a></code> setter steps are to <a id=the-script-element:string-replace-all href=https://dom.spec.whatwg.org/#string-replace-all data-x-internal=string-replace-all>string replace
  all</a> with the given value within <a id=the-script-element:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLScriptElement/supports_static title="The supports() static method of the HTMLScriptElement interface provides a simple and consistent method to feature-detect what types of scripts are supported by the user agent.">HTMLScriptElement/supports_static</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>94+</span></span><span class="safari yes"><span>Safari</span><span>16+</span></span><span class="chrome yes"><span>Chrome</span><span>96+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>96+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The static <dfn data-dfn-for=HTMLScriptElement id=dom-script-supports data-dfn-type=method><code>supports(<var>type</var>)</code></dfn> method steps are:</p>

  <ol><li><p>If <var>type</var> <a id=the-script-element:is href=https://infra.spec.whatwg.org/#string-is data-x-internal=is>is</a> "<code>classic</code>", then return
   true.<li><p>If <var>type</var> <a id=the-script-element:is-2 href=https://infra.spec.whatwg.org/#string-is data-x-internal=is>is</a> "<code>module</code>", then return
   true.<li><p>If <var>type</var> <a id=the-script-element:is-3 href=https://infra.spec.whatwg.org/#string-is data-x-internal=is>is</a> "<code>importmap</code>", then return
   true.<li><p>If <var>type</var> <a id=the-script-element:is-4 href=https://infra.spec.whatwg.org/#string-is data-x-internal=is>is</a> "<code>speculationrules</code>", then return
   true.<li><p>Return false.</ol>

  

  <p class=note>The <var>type</var> argument has to exactly match these values; we do not
  perform an <a id=the-script-element:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match. This is different from how <code id=the-script-element:attr-script-type-6><a href=#attr-script-type>type</a></code> content attribute values are treated, and how
  <code id=the-script-element:domtokenlist-2><a data-x-internal=domtokenlist href=https://dom.spec.whatwg.org/#interface-domtokenlist>DOMTokenList</a></code>'s <code id=the-script-element:dom-domtokenlist-supports><a data-x-internal=dom-domtokenlist-supports href=https://dom.spec.whatwg.org/#dom-domtokenlist-supports>supports()</a></code> method
  works, but it aligns with the <code id=the-script-element:workertype><a href=workers.html#workertype>WorkerType</a></code> enumeration used in the <code id=the-script-element:dom-worker><a href=workers.html#dom-worker>Worker()</a></code> constructor.</p>

  <hr>

  <div class=example>

   <p>In this example, two <code id=the-script-element:the-script-element-10><a href=#the-script-element>script</a></code> elements are used. One embeds an external
   <a id=the-script-element:classic-script-9 href=webappapis.html#classic-script>classic script</a>, and the other includes some data as a <a href=#data-block id=the-script-element:data-block-3>data block</a>.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;game-engine.js&quot;</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;text/x-game-map&quot;</c-><c- p>&gt;</c->
<c- p>........</c->U<c- p>.........</c->e
o<c- p>............</c->A<c- p>....</c->e
<c- p>.....</c->A<c- p>.....</c->AAA<c- p>....</c->e
<c- p>.</c->A<c- p>..</c->AAA<c- p>...</c->AAAAA<c- p>...</c->e
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>The data in this case might be used by the script to generate the map of a video game. The
   data doesn't have to be used that way, though; maybe the map data is actually embedded in other
   parts of the page's markup, and the data block here is just used by the site's search engine to
   help users who are looking for particular features in their game maps.</p>

  </div>

  <div class=example>

   <p>The following sample shows how a <code id=the-script-element:the-script-element-11><a href=#the-script-element>script</a></code> element can be used to define a function
   that is then used by other parts of the document, as part of a <a id=the-script-element:classic-script-10 href=webappapis.html#classic-script>classic script</a>. It
   also shows how a <code id=the-script-element:the-script-element-12><a href=#the-script-element>script</a></code> element can be used to invoke script while the document is
   being parsed, in this case to initialize the form's output.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>function</c-> calculate<c- p>(</c->form<c- p>)</c-> <c- p>{</c->
   <c- a>var</c-> price <c- o>=</c-> <c- mf>52000</c-><c- p>;</c->
   <c- k>if</c-> <c- p>(</c->form<c- p>.</c->elements<c- p>.</c->brakes<c- p>.</c->checked<c- p>)</c->
     price <c- o>+=</c-> <c- mf>1000</c-><c- p>;</c->
   <c- k>if</c-> <c- p>(</c->form<c- p>.</c->elements<c- p>.</c->radio<c- p>.</c->checked<c- p>)</c->
     price <c- o>+=</c-> <c- mf>2500</c-><c- p>;</c->
   <c- k>if</c-> <c- p>(</c->form<c- p>.</c->elements<c- p>.</c->turbo<c- p>.</c->checked<c- p>)</c->
     price <c- o>+=</c-> <c- mf>5000</c-><c- p>;</c->
   <c- k>if</c-> <c- p>(</c->form<c- p>.</c->elements<c- p>.</c->sticker<c- p>.</c->checked<c- p>)</c->
     price <c- o>+=</c-> <c- mf>250</c-><c- p>;</c->
   form<c- p>.</c->elements<c- p>.</c->result<c- p>.</c->value <c- o>=</c-> price<c- p>;</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>form</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;pricecalc&quot;</c-> <c- e>onsubmit</c-><c- o>=</c-><c- s>&quot;return false&quot;</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;calculate(this)&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>fieldset</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>legend</c-><c- p>&gt;</c->Work out the price of your car<c- p>&lt;/</c-><c- f>legend</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Base cost: £52000.<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Select additional options:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>ul</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>brakes</c-><c- p>&gt;</c-> Ceramic brakes (£1000)<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>radio</c-><c- p>&gt;</c-> Satellite radio (£2500)<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>turbo</c-><c- p>&gt;</c-> Turbo charger (£5000)<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>li</c-><c- p>&gt;&lt;</c-><c- f>label</c-><c- p>&gt;&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>checkbox</c-> <c- e>name</c-><c- o>=</c-><c- s>sticker</c-><c- p>&gt;</c-> &quot;XZ&quot; sticker (£250)<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;&lt;/</c-><c- f>li</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>ul</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Total: £<c- p>&lt;</c-><c- f>output</c-> <c- e>name</c-><c- o>=</c-><c- s>result</c-><c- p>&gt;&lt;/</c-><c- f>output</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>fieldset</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  calculate<c- p>(</c->document<c- p>.</c->forms<c- p>.</c->pricecalc<c- p>);</c->
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div id=script-type-module-example-1 class=example><a href=#script-type-module-example-1 class=self-link></a>

   <p>The following sample shows how a <code id=the-script-element:the-script-element-13><a href=#the-script-element>script</a></code> element can be used to include an
   external <a id=the-script-element:javascript-module-script-4 href=webappapis.html#javascript-module-script>JavaScript module script</a>.

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;module&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;app.mjs&quot;</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>This module, and all its dependencies (expressed through JavaScript <code>import</code> statements in the source file), will be fetched. Once the entire
   resulting module graph has been imported, and the document has finished parsing, the contents of
   <code>app.mjs</code> will be evaluated.</p>

   <p>Additionally, if code from another <code id=the-script-element:the-script-element-14><a href=#the-script-element>script</a></code> element in the same <code id=the-script-element:window><a href=nav-history-apis.html#window>Window</a></code>
   imports the module from <code>app.mjs</code> (e.g. via <code>import
   "app.html";</code>), then the same <a id=the-script-element:javascript-module-script-5 href=webappapis.html#javascript-module-script>JavaScript module script</a> created by the
   former <code id=the-script-element:the-script-element-15><a href=#the-script-element>script</a></code> element will be imported.</p>

  </div>

  <div id=script-nomodule-example class=example><a href=#script-nomodule-example class=self-link></a>

  <p>This example shows how to include a <a id=the-script-element:javascript-module-script-6 href=webappapis.html#javascript-module-script>JavaScript module script</a> for modern user
  agents, and a <a id=the-script-element:classic-script-11 href=webappapis.html#classic-script>classic script</a> for older user agents:</p>

  <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;module&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;app.mjs&quot;</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-> <c- e>nomodule</c-> <c- e>defer</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;classic-app-bundle.js&quot;</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  <p>In modern user agents that support <a href=webappapis.html#javascript-module-script id=the-script-element:javascript-module-script-7>JavaScript module
  scripts</a>, the <code id=the-script-element:the-script-element-16><a href=#the-script-element>script</a></code> element with the <code id=the-script-element:attr-script-nomodule-3><a href=#attr-script-nomodule>nomodule</a></code> attribute will be ignored, and the
  <code id=the-script-element:the-script-element-17><a href=#the-script-element>script</a></code> element with a <code id=the-script-element:attr-script-type-7><a href=#attr-script-type>type</a></code> of "<code>module</code>" will be fetched and evaluated (as a <a id=the-script-element:javascript-module-script-8 href=webappapis.html#javascript-module-script>JavaScript module
  script</a>). Conversely, older user agents will ignore the <code id=the-script-element:the-script-element-18><a href=#the-script-element>script</a></code> element with a
  <code id=the-script-element:attr-script-type-8><a href=#attr-script-type>type</a></code> of "<code>module</code>", as that is an
  unknown script type for them — but they will have no problem fetching and evaluating the other
  <code id=the-script-element:the-script-element-19><a href=#the-script-element>script</a></code> element (as a <a id=the-script-element:classic-script-12 href=webappapis.html#classic-script>classic script</a>), since they do not implement the
  <code id=the-script-element:attr-script-nomodule-4><a href=#attr-script-nomodule>nomodule</a></code> attribute.</p>

  </div>

  <div id=script-type-module-example-2 class=example><a href=#script-type-module-example-2 class=self-link></a>

   <p>The following sample shows how a <code id=the-script-element:the-script-element-20><a href=#the-script-element>script</a></code> element can be used to write an inline
   <a id=the-script-element:javascript-module-script-9 href=webappapis.html#javascript-module-script>JavaScript module script</a> that performs a number of substitutions on the document's
   text, in order to make for a more interesting reading experience (e.g. on a news site):
   <a href=references.html#refsXKCD1288>[XKCD1288]</a></p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;module&quot;</c-><c- p>&gt;</c->
 <c- k>import</c-> <c- p>{</c-> walkAllTextNodeDescendants <c- p>}</c-> <c- k>from</c-> <c- u>&quot;./dom-utils.mjs&quot;</c-><c- p>;</c->

 <c- a>const</c-> substitutions <c- o>=</c-> <c- k>new</c-> Map<c- p>([</c->
   <c- p>[</c-><c- u>&quot;witnesses&quot;</c-><c- p>,</c-> <c- u>&quot;these dudes I know&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;allegedly&quot;</c-><c- p>,</c-> <c- u>&quot;kinda probably&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;new study&quot;</c-><c- p>,</c-> <c- u>&quot;Tumblr post&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;rebuild&quot;</c-><c- p>,</c-> <c- u>&quot;avenge&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;space&quot;</c-><c- p>,</c-> <c- u>&quot;spaaace&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;Google glass&quot;</c-><c- p>,</c-> <c- u>&quot;Virtual Boy&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;smartphone&quot;</c-><c- p>,</c-> <c- u>&quot;Pokédex&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;electric&quot;</c-><c- p>,</c-> <c- u>&quot;atomic&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;Senator&quot;</c-><c- p>,</c-> <c- u>&quot;Elf-Lord&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;car&quot;</c-><c- p>,</c-> <c- u>&quot;cat&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;election&quot;</c-><c- p>,</c-> <c- u>&quot;eating contest&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;Congressional leaders&quot;</c-><c- p>,</c-> <c- u>&quot;river spirits&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;homeland security&quot;</c-><c- p>,</c-> <c- u>&quot;Homestar Runner&quot;</c-><c- p>]</c->
   <c- p>[</c-><c- u>&quot;could not be reached for comment&quot;</c-><c- p>,</c-> <c- u>&quot;is guilty and everyone knows it&quot;</c-><c- p>]</c->
 <c- p>]);</c->

 <c- a>function</c-> substitute<c- p>(</c->textNode<c- p>)</c-> <c- p>{</c->
   <c- k>for</c-> <c- p>(</c-><c- a>const</c-> <c- p>[</c->before<c- p>,</c-> after<c- p>]</c-> <c- k>of</c-> substitutions<c- p>.</c->entries<c- p>())</c-> <c- p>{</c->
     textNode<c- p>.</c->data <c- o>=</c-> textNode<c- p>.</c->data<c- p>.</c->replace<c- p>(</c-><c- k>new</c-> RegExp<c- p>(</c-><c- sb>`\\b</c-><c- si>${</c->before<c- si>}</c-><c- sb>\\b`</c-><c- p>,</c-> <c- u>&quot;ig&quot;</c-><c- p>),</c-> after<c- p>);</c->
   <c- p>}</c->
 <c- p>}</c->

 walkAllTextNodeDescendants<c- p>(</c->document<c- p>.</c->body<c- p>,</c-> substitute<c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>Some notable features gained by using a JavaScript module script include the ability to import
   functions from other JavaScript modules, strict mode by default, and how top-level declarations
   do not introduce new properties onto the <a id=the-script-element:global-object href=webappapis.html#global-object>global object</a>. Also note that no matter
   where this <code id=the-script-element:the-script-element-21><a href=#the-script-element>script</a></code> element appears in the document, it will not be evaluated until
   both document parsing has complete and its dependency (<code>dom-utils.mjs</code>) has
   been fetched and evaluated.</p>
  </div>

  <div id=json-module-script-example class=example><a href=#json-module-script-example class=self-link></a>
   <p>The following sample shows how a <a id=the-script-element:json-module-script href=webappapis.html#json-module-script>JSON module script</a> can be imported from inside
   a <a id=the-script-element:javascript-module-script-10 href=webappapis.html#javascript-module-script>JavaScript module script</a>:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;module&quot;</c-><c- p>&gt;</c->
 <c- k>import</c-> peopleInSpace <c- k>from</c-> <c- u>&quot;http://api.open-notify.org/astros.json&quot;</c-> <c- a>with</c-> <c- p>{</c-> type<c- o>:</c-> <c- u>&quot;json&quot;</c-> <c- p>};</c->

 <c- a>const</c-> list <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- u>&quot;#people-in-space&quot;</c-><c- p>);</c->
 <c- k>for</c-> <c- p>(</c-><c- a>const</c-> <c- p>{</c-> craft<c- p>,</c-> name <c- p>}</c-> <c- k>of</c-> peopleInSpace<c- p>.</c->people<c- p>)</c-> <c- p>{</c->
   <c- a>const</c-> li <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>&quot;li&quot;</c-><c- p>);</c->
   li<c- p>.</c->textContent <c- o>=</c-> <c- sb>`</c-><c- si>${</c->name<c- si>}</c-><c- sb> / </c-><c- si>${</c->craft<c- si>}</c-><c- sb>`</c-><c- p>;</c->
   list<c- p>.</c->append<c- p>(</c->li<c- p>);</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>MIME type checking for module scripts is strict. In order for the fetch of the <a id=the-script-element:json-module-script-2 href=webappapis.html#json-module-script>JSON
   module script</a> to succeed, the HTTP response must have a <a id=the-script-element:json-mime-type href=https://mimesniff.spec.whatwg.org/#json-mime-type data-x-internal=json-mime-type>JSON MIME type</a>, for
   example <code>Content-Type: text/json</code>. On the other hand, if the <code>with { type: "json" }</code> part of the statement is omitted, it is assumed that the
   intent is to import a <a id=the-script-element:javascript-module-script-11 href=webappapis.html#javascript-module-script>JavaScript module script</a>, and the fetch will fail if the HTTP
   response has a MIME type that is not a <a id=the-script-element:javascript-mime-type href=https://mimesniff.spec.whatwg.org/#javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME type</a>.</p>
  </div>

  

  <h5 id=script-processing-model><span class=secno>4.12.1.1</span> Processing model<a href=#script-processing-model class=self-link></a></h5>

  <p>A <code id=script-processing-model:the-script-element><a href=#the-script-element>script</a></code> element has several associated pieces of state.</p>

  <p>A <code id=script-processing-model:the-script-element-2><a href=#the-script-element>script</a></code> element has a <dfn id=parser-document>parser document</dfn>, which is either null or a
  <code id=script-processing-model:document><a href=dom.html#document>Document</a></code>, initially null. It is set by the <a id=script-processing-model:html-parser href=parsing.html#html-parser>HTML parser</a> and the
  <a id=script-processing-model:xml-parser href=xhtml.html#xml-parser>XML parser</a> on <code id=script-processing-model:the-script-element-3><a href=#the-script-element>script</a></code> elements they insert, and affects the processing
  of those elements. <code id=script-processing-model:the-script-element-4><a href=#the-script-element>script</a></code> elements with non-null <a href=#parser-document id=script-processing-model:parser-document>parser documents</a> are known as <dfn data-dfn-for=script id=parser-inserted data-export="">parser-inserted</dfn>.</p>

  <p>A <code id=script-processing-model:the-script-element-5><a href=#the-script-element>script</a></code> element has a <dfn id=preparation-time-document>preparation-time document</dfn>, which is either null
  or a <code id=script-processing-model:document-2><a href=dom.html#document>Document</a></code>, initially null. It is used to prevent scripts that move between
  documents during <a href=#prepare-the-script-element id=script-processing-model:prepare-the-script-element>preparation</a> from <a href=#execute-the-script-element id=script-processing-model:execute-the-script-element>executing</a>.</p>

  <p id=non-blocking>A <code id=script-processing-model:the-script-element-6><a href=#the-script-element>script</a></code> element has a <dfn id=script-force-async>force
  async</dfn> boolean, initially true. It is set to false by the <a id=script-processing-model:html-parser-2 href=parsing.html#html-parser>HTML parser</a> and the
  <a id=script-processing-model:xml-parser-2 href=xhtml.html#xml-parser>XML parser</a> on <code id=script-processing-model:the-script-element-7><a href=#the-script-element>script</a></code> elements they insert, and when the element gets an
  <code id=script-processing-model:attr-script-async><a href=#attr-script-async>async</a></code> content attribute added.</p>

  <p>A <code id=script-processing-model:the-script-element-8><a href=#the-script-element>script</a></code> element has a <dfn id=concept-script-external>from an external
  file</dfn> boolean, initially false. It is determined when the script is <a href=#prepare-the-script-element id=script-processing-model:prepare-the-script-element-2>prepared</a>, based on the <code id=script-processing-model:attr-script-src><a href=#attr-script-src>src</a></code>
  attribute of the element at that time.</p>

  <p>A <code id=script-processing-model:the-script-element-9><a href=#the-script-element>script</a></code> element has a <dfn id=ready-to-be-parser-executed>ready to be parser-executed</dfn> boolean, initially
  false. This is used only used for elements that are also <a href=#parser-inserted id=script-processing-model:parser-inserted>parser-inserted</a>, to let the
  parser know when to execute the script.</p>

  <p>A <code id=script-processing-model:the-script-element-10><a href=#the-script-element>script</a></code> element has an <dfn id=already-started>already started</dfn> boolean, initially false.</p>

  <p>A <code id=script-processing-model:the-script-element-11><a href=#the-script-element>script</a></code> element has a <dfn id=concept-script-delay-load>delaying the
  load event</dfn> boolean, initially false.</p>

  <p>A <code id=script-processing-model:the-script-element-12><a href=#the-script-element>script</a></code> element has a <dfn id=concept-script-type>type</dfn>, which is
  either null, "<code>classic</code>", "<code>module</code>", "<code>importmap</code>", or "<code>speculationrules</code>", initially null. It is
  determined when the element is <a href=#prepare-the-script-element id=script-processing-model:prepare-the-script-element-3>prepared</a>, based on
  the <code id=script-processing-model:attr-script-type><a href=#attr-script-type>type</a></code> attribute of the element at that time.</p>

  <p id=concept-script-script>A <code id=script-processing-model:the-script-element-13><a href=#the-script-element>script</a></code> element has a <dfn id=concept-script-result>result</dfn>, which is either "<code>uninitialized</code>", null (representing an error), a <a href=webappapis.html#concept-script id=script-processing-model:concept-script>script</a>, an <a id=script-processing-model:import-map-parse-result href=webappapis.html#import-map-parse-result>import map parse result</a>, or a
  <a id=script-processing-model:speculation-rules-parse-result href=webappapis.html#speculation-rules-parse-result>speculation rules parse result</a>. It is initially "<code>uninitialized</code>".</p>

  <p id=the-script-is-ready>A <code id=script-processing-model:the-script-element-14><a href=#the-script-element>script</a></code> element has <dfn id=steps-to-run-when-the-result-is-ready>steps to run when the result
  is ready</dfn>, which are a series of steps or null, initially null. To <dfn id=mark-as-ready>mark as ready</dfn> a
  <code id=script-processing-model:the-script-element-15><a href=#the-script-element>script</a></code> element <var>el</var> given a <var>result</var>:</p>

  <ol><li><p>Set <var>el</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result>result</a> to
   <var>result</var>.<li><p>If <var>el</var>'s <a href=#steps-to-run-when-the-result-is-ready id=script-processing-model:steps-to-run-when-the-result-is-ready>steps to run when the result is ready</a> are not null, then
   run them.<li><p>Set <var>el</var>'s <a href=#steps-to-run-when-the-result-is-ready id=script-processing-model:steps-to-run-when-the-result-is-ready-2>steps to run when the result is ready</a> to null.<li><p>Set <var>el</var>'s <a href=#concept-script-delay-load id=script-processing-model:concept-script-delay-load>delaying the load
   event</a> to false.</ol>

  <hr>

  <p>A <code id=script-processing-model:the-script-element-16><a href=#the-script-element>script</a></code> element <var>el</var> is <a id=script-processing-model:implicitly-potentially-render-blocking href=urls-and-fetching.html#implicitly-potentially-render-blocking>implicitly potentially
  render-blocking</a> if <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type>type</a> is
  "<code>classic</code>", <var>el</var> is <a href=#parser-inserted id=script-processing-model:parser-inserted-2>parser-inserted</a>, and
  <var>el</var> does not have an <code id=script-processing-model:attr-script-async-2><a href=#attr-script-async>async</a></code> or <code id=script-processing-model:attr-script-defer><a href=#attr-script-defer>defer</a></code> attribute.</p>

  <p>The <a href=https://dom.spec.whatwg.org/#concept-node-clone-ext id=script-processing-model:concept-node-clone-ext data-x-internal=concept-node-clone-ext>cloning steps</a> for <code id=script-processing-model:the-script-element-17><a href=#the-script-element>script</a></code>
  elements given <var>node</var>, <var>copy</var>, and <var>subtree</var> are to set
  <var>copy</var>'s <a href=#already-started id=script-processing-model:already-started>already started</a> to <var>node</var>'s <a href=#already-started id=script-processing-model:already-started-2>already
  started</a>.</p>

  <p>When an <code id=script-processing-model:attr-script-async-3><a href=#attr-script-async>async</a></code> attribute is added to a
  <code id=script-processing-model:the-script-element-18><a href=#the-script-element>script</a></code> element <var>el</var>, the user agent must set <var>el</var>'s
  <a href=#script-force-async id=script-processing-model:script-force-async>force async</a> to false.</p>
  

  <p>Whenever a <code id=script-processing-model:the-script-element-19><a href=#the-script-element>script</a></code> element <var>el</var>'s <a href=#concept-script-delay-load id=script-processing-model:concept-script-delay-load-2>delaying the load event</a> is true, the user agent must
  <a id=script-processing-model:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> of <var>el</var>'s <a href=#preparation-time-document id=script-processing-model:preparation-time-document>preparation-time document</a>.</p>

  <hr>

  <p>The <code id=script-processing-model:the-script-element-20><a href=#the-script-element>script</a></code> <a id=script-processing-model:html-element-post-connection-steps href=infrastructure.html#html-element-post-connection-steps>HTML element post-connection steps</a>, given
  <var>insertedNode</var>, are:</p>

  <ol><li>
    <p>If <var>insertedNode</var> is not <a id=script-processing-model:connected href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, then return.</p>

    <div class=example>
     <p>This can happen in the case where an earlier-inserted <code id=script-processing-model:the-script-element-21><a href=#the-script-element>script</a></code> removes a
     later-inserted <code id=script-processing-model:the-script-element-22><a href=#the-script-element>script</a></code>. For instance:</p>

     <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
<c- a>const</c-> script1 <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;script&apos;</c-><c- p>);</c->
script1<c- p>.</c->innerText <c- o>=</c-> <c- sb>`</c->
<c- sb>  document.querySelector(&apos;#script2&apos;).remove();</c->
<c- sb>`</c-><c- p>;</c->

<c- a>const</c-> script2 <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;script&apos;</c-><c- p>);</c->
script2<c- p>.</c->id <c- o>=</c-> <c- t>&apos;script2&apos;</c-><c- p>;</c->
script2<c- p>.</c->textContent <c- o>=</c-> <c- sb>`console.log(&apos;script#2 running&apos;)`</c-><c- p>;</c->

document<c- p>.</c->body<c- p>.</c->append<c- p>(</c->script1<c- p>,</c-> script2<c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

     <p>Nothing is printed to the console in this example. By the time the <a id=script-processing-model:html-element-post-connection-steps-2 href=infrastructure.html#html-element-post-connection-steps>HTML element
     post-connection steps</a> run for the first <code id=script-processing-model:the-script-element-23><a href=#the-script-element>script</a></code> that was atomically inserted
     by <code id=script-processing-model:dom-node-append><a data-x-internal=dom-node-append href=https://dom.spec.whatwg.org/#dom-node-append>append()</a></code>, it can observe that the second
     <code id=script-processing-model:the-script-element-24><a href=#the-script-element>script</a></code> is already <a id=script-processing-model:connected-2 href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a> to the DOM. It removes the second
     <code id=script-processing-model:the-script-element-25><a href=#the-script-element>script</a></code>, so that by the time <em>its</em> <a id=script-processing-model:html-element-post-connection-steps-3 href=infrastructure.html#html-element-post-connection-steps>HTML element post-connection
     steps</a> run, it is no longer <a id=script-processing-model:connected-3 href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, and does not get <a href=#prepare-the-script-element id=script-processing-model:prepare-the-script-element-4>prepared</a>.</p>
    </div>
   <li><p>If <var>insertedNode</var> is <a href=#parser-inserted id=script-processing-model:parser-inserted-3>parser-inserted</a>, then return.<li><p><a href=#prepare-the-script-element id=script-processing-model:prepare-the-script-element-5>Prepare the script element</a> given <var>insertedNode</var>.</ol>

  <p>The <code id=script-processing-model:the-script-element-26><a href=#the-script-element>script</a></code> <a id=script-processing-model:html-element-removing-steps href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a> given <var>removedNode</var>
  are:</p>

  <ol><li>
    <p>If <var>removedNode</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result-2>result</a> is a
    <a id=script-processing-model:speculation-rules-parse-result-2 href=webappapis.html#speculation-rules-parse-result>speculation rules parse result</a>, then:</p>

    <ol><li><p><a id=script-processing-model:unregister-speculation-rules href=webappapis.html#unregister-speculation-rules>Unregister speculation rules</a> given <var>removedNode</var>'s <a id=script-processing-model:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant
     global object</a> and <var>removedNode</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result-3>result</a>.<li><p>Set <var>removedNode</var>'s <a href=#already-started id=script-processing-model:already-started-3>already started</a> to false.<li><p>Set <var>removedNode</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result-4>result</a> to
     null.</ol>
   </ol>

  <p>The <code id=script-processing-model:the-script-element-27><a href=#the-script-element>script</a></code> <a id=script-processing-model:children-changed-steps href=https://dom.spec.whatwg.org/#concept-node-children-changed-ext data-x-internal=children-changed-steps>children changed steps</a> given <var>changedNode</var>
  are:</p>

  <ol><li><p>Run the <code id=script-processing-model:the-script-element-28><a href=#the-script-element>script</a></code> <a id=script-processing-model:html-element-post-connection-steps-4 href=infrastructure.html#html-element-post-connection-steps>HTML element post-connection steps</a>, given
   <var>changedNode</var>.</ol>

  <div class=example>
   <p>This has an interesting implication on the execution order of a <code id=script-processing-model:the-script-element-29><a href=#the-script-element>script</a></code> element
   and any newly-inserted child <code id=script-processing-model:the-script-element-30><a href=#the-script-element>script</a></code> elements. Consider the following snippet:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>id</c-><c- o>=</c-><c- s>outer-script</c-><c- p>&gt;&lt;/</c-><c- f>script</c-><c- p>&gt;</c->

<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>const</c-> outerScript <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- t>&apos;#outer-script&apos;</c-><c- p>);</c->

  <c- a>const</c-> start <c- o>=</c-> <c- k>new</c-> Text<c- p>(</c-><c- t>&apos;console.log(1);&apos;</c-><c- p>);</c->
  <c- a>const</c-> innerScript <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;script&apos;</c-><c- p>);</c->
  innerScript<c- p>.</c->textContent <c- o>=</c-> <c- sb>`console.log(&apos;inner script executing&apos;)`</c-><c- p>;</c->
  <c- a>const</c-> end <c- o>=</c-> <c- k>new</c-> Text<c- p>(</c-><c- t>&apos;console.log(2);&apos;</c-><c- p>);</c->

  outerScript<c- p>.</c->append<c- p>(</c->start<c- p>,</c-> innerScript<c- p>,</c-> end<c- p>);</c->

  <c- c1>// Logs:</c->
  <c- c1>// 1</c->
  <c- c1>// 2</c->
  <c- c1>// inner script executing</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>By the time the second script block executes, the <code>outer-script</code> has
   already been <a href=#prepare-the-script-element id=script-processing-model:prepare-the-script-element-6>prepared</a>, but because it is empty,
   it did not execute and therefore is not marked as <a href=#already-started id=script-processing-model:already-started-4>already started</a>. The atomic
   insertion of the <code id=script-processing-model:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes and nested <code id=script-processing-model:the-script-element-31><a href=#the-script-element>script</a></code> element have the
   following effects:</p>

   <ol><li><p>All three child nodes get atomically inserted as children of <code>outer-script</code>; all of their <a href=https://dom.spec.whatwg.org/#concept-node-insert-ext id=script-processing-model:concept-node-insert-ext data-x-internal=concept-node-insert-ext>insertion
    steps</a> run, which have no observable consequences in this case.<li><p>The <code>outer-script</code>'s <a id=script-processing-model:children-changed-steps-2 href=https://dom.spec.whatwg.org/#concept-node-children-changed-ext data-x-internal=children-changed-steps>children changed steps</a> run, which
    <a href=#prepare-the-script-element id=script-processing-model:prepare-the-script-element-7>prepares</a> that script; because its body is now
    non-empty, this executes the contents of the two <code id=script-processing-model:text-2><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes, in order.<li><p>The <code id=script-processing-model:the-script-element-32><a href=#the-script-element>script</a></code> <a id=script-processing-model:html-element-post-connection-steps-5 href=infrastructure.html#html-element-post-connection-steps>HTML element post-connection steps</a> finally run for
    <code>innerScript</code>, causing its body to execute.</ol>
  </div>

  <p>The following <a href=https://dom.spec.whatwg.org/#concept-element-attributes-change-ext id=script-processing-model:concept-element-attributes-change-ext data-x-internal=concept-element-attributes-change-ext>attribute change
  steps</a>, given <var>element</var>, <var>localName</var>, <var>oldValue</var>,
  <var>value</var>, and <var>namespace</var>, are used for all <code id=script-processing-model:the-script-element-33><a href=#the-script-element>script</a></code> elements:</p>

  <ol><li><p>If <var>namespace</var> is not null, then return.<li><p>If <var>localName</var> is <code id=script-processing-model:attr-script-src-2><a href=#attr-script-src>src</a></code>, then run the
   <code id=script-processing-model:the-script-element-34><a href=#the-script-element>script</a></code> <a id=script-processing-model:html-element-post-connection-steps-6 href=infrastructure.html#html-element-post-connection-steps>HTML element post-connection steps</a>, given
   <var>element</var>.</ol>

  <p id=prepare-a-script>To <dfn id=prepare-the-script-element>prepare the script element</dfn> given a <code id=script-processing-model:the-script-element-35><a href=#the-script-element>script</a></code>
  element <var>el</var>:</p>

  <ol><li><p>If <var>el</var>'s <a href=#already-started id=script-processing-model:already-started-5>already started</a> is true, then return.<li><p>Let <var>parser document</var> be <var>el</var>'s <a href=#parser-document id=script-processing-model:parser-document-2>parser document</a>.<li>
    <p>Set <var>el</var>'s <a href=#parser-document id=script-processing-model:parser-document-3>parser document</a> to null.</p>

    <p class=note>This is done so that if parser-inserted <code id=script-processing-model:the-script-element-36><a href=#the-script-element>script</a></code> elements fail to run
    when the parser tries to run them, e.g. because they are empty or specify an unsupported
    scripting language, another script can later mutate them and cause them to run again.</p>
   <li>
    <p>If <var>parser document</var> is non-null and <var>el</var> does not have an <code id=script-processing-model:attr-script-async-4><a href=#attr-script-async>async</a></code> attribute, then set <var>el</var>'s <a href=#script-force-async id=script-processing-model:script-force-async-2>force async</a> to true.</p>

    <p class=note>This is done so that if a parser-inserted <code id=script-processing-model:the-script-element-37><a href=#the-script-element>script</a></code> element fails to
    run when the parser tries to run it, but it is later executed after a script dynamically
    updates it, it will execute in an async fashion even if the <code id=script-processing-model:attr-script-async-5><a href=#attr-script-async>async</a></code> attribute isn't set.</p>
   <li><p>Let <var>source text</var> be <var>el</var>'s <a id=script-processing-model:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a>.<li id=script-processing-empty><p>If <var>el</var> has no <code id=script-processing-model:attr-script-src-3><a href=#attr-script-src>src</a></code> attribute, and <var>source text</var> is the empty string,
   then return.<li><p>If <var>el</var> is not <a id=script-processing-model:connected-4 href=https://dom.spec.whatwg.org/#connected data-x-internal=connected>connected</a>, then return.<li id=script-processing-prepare>
    <p>If any of the following are true:</p>

    <ul><li><p><var>el</var> has a <code id=script-processing-model:attr-script-type-2><a href=#attr-script-type>type</a></code> attribute whose value is
     the empty string;<li><p><var>el</var> has no <code id=script-processing-model:attr-script-type-3><a href=#attr-script-type>type</a></code> attribute but it has a
     <code id=script-processing-model:attr-script-language><a href=obsolete.html#attr-script-language>language</a></code> attribute and <em>that</em> attribute's
     value is the empty string; or<li><p><var>el</var> has neither a <code id=script-processing-model:attr-script-type-4><a href=#attr-script-type>type</a></code> attribute nor a
     <code id=script-processing-model:attr-script-language-2><a href=obsolete.html#attr-script-language>language</a></code> attribute,</ul>

    <p>then let <var>the script block's type string</var> for this <code id=script-processing-model:the-script-element-38><a href=#the-script-element>script</a></code> element be
    "<code>text/javascript</code>".</p>

    <p>Otherwise, if <var>el</var> has a <code id=script-processing-model:attr-script-type-5><a href=#attr-script-type>type</a></code> attribute, then
    let <var>the script block's type string</var> be the value of that attribute with <a href=https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace id=script-processing-model:strip-leading-and-trailing-ascii-whitespace data-x-internal=strip-leading-and-trailing-ascii-whitespace>leading and trailing ASCII whitespace
    stripped</a>.</p>

    <p>Otherwise, <var>el</var> has a non-empty <code id=script-processing-model:attr-script-language-3><a href=obsolete.html#attr-script-language>language</a></code>
    attribute; let <var>the script block's type string</var> be the concatenation of "<code>text/</code>" and the value of <var>el</var>'s <code id=script-processing-model:attr-script-language-4><a href=obsolete.html#attr-script-language>language</a></code> attribute.</p>
    

    <p class=note>The <code id=script-processing-model:attr-script-language-5><a href=obsolete.html#attr-script-language>language</a></code> attribute is never
    conforming, and is always ignored if there is a <code id=script-processing-model:attr-script-type-6><a href=#attr-script-type>type</a></code>
    attribute present.</p>
   <li><p>If <var>the script block's type string</var> is a <a id=script-processing-model:javascript-mime-type-essence-match href=https://mimesniff.spec.whatwg.org/#javascript-mime-type-essence-match data-x-internal=javascript-mime-type-essence-match>JavaScript MIME type essence
   match</a>, then set <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-2>type</a> to "<code>classic</code>".<li><p>Otherwise, if <var>the script block's type string</var> is an <a id=script-processing-model:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
   case-insensitive</a> match for the string "<code>module</code>", then set
   <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-3>type</a> to "<code>module</code>".<li><p>Otherwise, if <var>the script block's type string</var> is an <a id=script-processing-model:ascii-case-insensitive-2 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
   case-insensitive</a> match for the string "<code>importmap</code>", then set
   <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-4>type</a> to "<code>importmap</code>".<li><p>Otherwise, if <var>the script block's type string</var> is an <a id=script-processing-model:ascii-case-insensitive-3 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII
   case-insensitive</a> match for the string "<code>speculationrules</code>", then set
   <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-5>type</a> to "<code>speculationrules</code>".<li><p>Otherwise, return. (No script is executed, and <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-6>type</a> is left as null.)<li><p>If <var>parser document</var> is non-null, then set <var>el</var>'s <a href=#parser-document id=script-processing-model:parser-document-4>parser
   document</a> back to <var>parser document</var> and set <var>el</var>'s <a href=#script-force-async id=script-processing-model:script-force-async-3>force async</a> to false.<li id=script-processing-start><p>Set <var>el</var>'s <a href=#already-started id=script-processing-model:already-started-6>already started</a> to
   true.<li><p>Set <var>el</var>'s <a href=#preparation-time-document id=script-processing-model:preparation-time-document-2>preparation-time document</a> to its <a id=script-processing-model:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
   document</a>.</p>

   <li><p>If <var>parser document</var> is non-null, and <var>parser document</var> is not equal to
   <var>el</var>'s <a href=#preparation-time-document id=script-processing-model:preparation-time-document-3>preparation-time document</a>, then return.<li id=script-processing-noscript> <p>If <a href=webappapis.html#concept-n-noscript id=script-processing-model:concept-n-noscript>scripting is
   disabled</a> for <var>el</var>, then return.</p>

    <p class=note>The definition of <a href=webappapis.html#concept-n-noscript id=script-processing-model:concept-n-noscript-2>scripting is
    disabled</a> means that, amongst others, the following scripts will not execute: scripts in
    <code id=script-processing-model:xmlhttprequest><a data-x-internal=xmlhttprequest href=https://xhr.spec.whatwg.org/#xmlhttprequest>XMLHttpRequest</a></code>'s <code id=script-processing-model:dom-xmlhttprequest-responsexml><a data-x-internal=dom-xmlhttprequest-responsexml href=https://xhr.spec.whatwg.org/#dom-xmlhttprequest-responsexml>responseXML</a></code>
    documents, scripts in <code id=script-processing-model:domparser><a href=dynamic-markup-insertion.html#domparser>DOMParser</a></code>-created documents, scripts in documents created by
    <code id=script-processing-model:xsltprocessor><a href=infrastructure.html#xsltprocessor>XSLTProcessor</a></code>'s <code id=script-processing-model:dom-xsltprocessor-transformtodocument><a href=infrastructure.html#dom-xsltprocessor-transformtodocument>transformToDocument</a></code> feature, and scripts
    that are first inserted by a script into a <code id=script-processing-model:document-3><a href=dom.html#document>Document</a></code> that was created using the
    <code id=script-processing-model:dom-domimplementation-createdocument><a data-x-internal=dom-domimplementation-createdocument href=https://dom.spec.whatwg.org/#dom-domimplementation-createdocument>createDocument()</a></code> API. <a href=references.html#refsXHR>[XHR]</a>
    <a href=references.html#refsDOMPARSING>[DOMPARSING]</a> <a href=references.html#refsXSLTP>[XSLTP]</a> <a href=references.html#refsDOM>[DOM]</a></p>
   <li>
    <p>If <var>el</var> has a <code id=script-processing-model:attr-script-nomodule><a href=#attr-script-nomodule>nomodule</a></code> content attribute
    and its <a href=#concept-script-type id=script-processing-model:concept-script-type-7>type</a> is "<code>classic</code>",
    then return.</p>

    <p class=note>This means specifying <code id=script-processing-model:attr-script-nomodule-2><a href=#attr-script-nomodule>nomodule</a></code> on a
    <a id=script-processing-model:module-script href=webappapis.html#module-script>module script</a> has no effect; the algorithm continues onward.</p>
   <li><p>Let <var>cspType</var> be "<code>script speculationrules</code>" if
   <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-8>type</a> is "<code>speculationrules</code>"; otherwise, "<code>script</code>".<li id=script-processing-csp><p>If <var>el</var> does not have a <code id=script-processing-model:attr-script-src-4><a href=#attr-script-src>src</a></code> content attribute, and the <a id="script-processing-model:should-element's-inline-behavior-be-blocked-by-content-security-policy" href=https://w3c.github.io/webappsec-csp/#should-block-inline data-x-internal="should-element's-inline-behavior-be-blocked-by-content-security-policy">Should element's inline
   behavior be blocked by Content Security Policy?</a> algorithm returns "<code>Blocked</code>" when given <var>el</var>, <var>cspType</var>, and <var>source
   text</var>, then return. <a href=references.html#refsCSP>[CSP]</a><li id=script-processing-for>
    <p>If <var>el</var> has an <code id=script-processing-model:attr-script-event><a href=obsolete.html#attr-script-event>event</a></code> attribute and a <code id=script-processing-model:attr-script-for><a href=obsolete.html#attr-script-for>for</a></code> attribute, and <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-9>type</a> is "<code>classic</code>", then:</p>

    <ol><li><p>Let <var>for</var> be the value of <var>el</var>'s <code id=script-processing-model:attr-script-for-2><a href=obsolete.html#attr-script-for>for</a></code> attribute.<li><p>Let <var>event</var> be the value of <var>el</var>'s <code id=script-processing-model:attr-script-event-2><a href=obsolete.html#attr-script-event>event</a></code> attribute.<li><p><a id=script-processing-model:strip-leading-and-trailing-ascii-whitespace-2 href=https://infra.spec.whatwg.org/#strip-leading-and-trailing-ascii-whitespace data-x-internal=strip-leading-and-trailing-ascii-whitespace>Strip leading and trailing ASCII whitespace</a> from <var>event</var> and
     <var>for</var>.<li><p>If <var>for</var> is not an <a id=script-processing-model:ascii-case-insensitive-4 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for the string
     "<code>window</code>", then return.<li><p>If <var>event</var> is not an <a id=script-processing-model:ascii-case-insensitive-5 href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a> match for either the
     string "<code>onload</code>" or the string "<code>onload()</code>", then
     return.</ol>
   <li id=script-processing-encoding>
    <p>If <var>el</var> has a <code id=script-processing-model:attr-script-charset><a href=obsolete.html#attr-script-charset>charset</a></code> attribute, then let
    <var>encoding</var> be the result of <a id=script-processing-model:getting-an-encoding href=https://encoding.spec.whatwg.org/#concept-encoding-get data-x-internal=getting-an-encoding>getting an encoding</a> from the value of the
    <code id=script-processing-model:attr-script-charset-2><a href=obsolete.html#attr-script-charset>charset</a></code> attribute.</p>

    <p>If <var>el</var> does not have a <code id=script-processing-model:attr-script-charset-3><a href=obsolete.html#attr-script-charset>charset</a></code>
    attribute, or if <a id=script-processing-model:getting-an-encoding-2 href=https://encoding.spec.whatwg.org/#concept-encoding-get data-x-internal=getting-an-encoding>getting an encoding</a> failed, then let <var>encoding</var> be
    <var>el</var>'s <a id=script-processing-model:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-encoding id="script-processing-model:document's-character-encoding" data-x-internal="document's-character-encoding">the
    encoding</a>.</p>

    <p class=note>If <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-10>type</a> is "<code>module</code>", this encoding will be ignored.</p>
   <li><p>Let <var>classic script CORS setting</var> be the current state of <var>el</var>'s <code id=script-processing-model:attr-script-crossorigin><a href=#attr-script-crossorigin>crossorigin</a></code> content attribute.<li><p>Let <var>module script credentials mode</var> be the <a id=script-processing-model:cors-settings-attribute-credentials-mode href=urls-and-fetching.html#cors-settings-attribute-credentials-mode>CORS settings attribute
   credentials mode</a> for <var>el</var>'s <code id=script-processing-model:attr-script-crossorigin-2><a href=#attr-script-crossorigin>crossorigin</a></code> content attribute.</p>

   <li><p>Let <var>cryptographic nonce</var> be <var>el</var>'s <a id=script-processing-model:cryptographicnonce href=urls-and-fetching.html#cryptographicnonce>[[CryptographicNonce]]</a>
   internal slot's value.<li>
    <p>If <var>el</var> has an <code id=script-processing-model:attr-script-integrity><a href=#attr-script-integrity>integrity</a></code> attribute,
    then let <var>integrity metadata</var> be that attribute's value.</p>

    <p>Otherwise, let <var>integrity metadata</var> be the empty string.</p>
   <li><p>Let <var>referrer policy</var> be the current state of <var>el</var>'s <code id=script-processing-model:attr-script-referrerpolicy><a href=#attr-script-referrerpolicy>referrerpolicy</a></code> content attribute.<li><p>Let <var>fetch priority</var> be the current state of <var>el</var>'s <code id=script-processing-model:attr-script-fetchpriority><a href=#attr-script-fetchpriority>fetchpriority</a></code> content attribute.<li><p>Let <var>parser metadata</var> be "<code>parser-inserted</code>" if
   <var>el</var> is <a href=#parser-inserted id=script-processing-model:parser-inserted-4>parser-inserted</a>, and "<code>not-parser-inserted</code>"
   otherwise.<li><p>Let <var>options</var> be a <a id=script-processing-model:script-fetch-options href=webappapis.html#script-fetch-options>script fetch options</a> whose <a href=webappapis.html#concept-script-fetch-options-nonce id=script-processing-model:concept-script-fetch-options-nonce>cryptographic nonce</a> is <var>cryptographic
   nonce</var>, <a href=webappapis.html#concept-script-fetch-options-integrity id=script-processing-model:concept-script-fetch-options-integrity>integrity metadata</a> is
   <var>integrity metadata</var>, <a href=webappapis.html#concept-script-fetch-options-parser id=script-processing-model:concept-script-fetch-options-parser>parser
   metadata</a> is <var>parser metadata</var>, <a href=webappapis.html#concept-script-fetch-options-credentials id=script-processing-model:concept-script-fetch-options-credentials>credentials mode</a> is <var>module script
   credentials mode</var>, <a href=webappapis.html#concept-script-fetch-options-referrer-policy id=script-processing-model:concept-script-fetch-options-referrer-policy>referrer
   policy</a> is <var>referrer policy</var>, and <a href=webappapis.html#concept-script-fetch-options-fetch-priority id=script-processing-model:concept-script-fetch-options-fetch-priority>fetch priority</a> is <var>fetch
   priority</var>.<li><p>Let <var>settings object</var> be <var>el</var>'s <a id=script-processing-model:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s
   <a id=script-processing-model:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>.<li id=script-processing-src-prepare>
    <p>If <var>el</var> has a <code id=script-processing-model:attr-script-src-5><a href=#attr-script-src>src</a></code> content attribute, then:</p>

    <ol><li>
      <p>If <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-11>type</a> is "<code>importmap</code>" or "<code>speculationrules</code>", then <a id=script-processing-model:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an
      element task</a> on the <a id=script-processing-model:dom-manipulation-task-source href=webappapis.html#dom-manipulation-task-source>DOM manipulation task source</a> given <var>el</var> to
      <a href=https://dom.spec.whatwg.org/#concept-event-fire id=script-processing-model:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=script-processing-model:event-error><a href=indices.html#event-error>error</a></code> at <var>el</var>, and return.</p>

      <p class=note>External import maps and speculation rules are not currently supported. See <a href=https://github.com/WICG/import-maps/issues/235>WICG/import-maps issue #235</a> and <a href=https://github.com/WICG/nav-speculation/issues/348>WICG/nav-speculation issue #348</a>
      for discussions on adding support.</p>
     <li><p>Let <var>src</var> be the value of <var>el</var>'s <code id=script-processing-model:attr-script-src-6><a href=#attr-script-src>src</a></code> attribute.<li><p>If <var>src</var> is the empty string, then <a id=script-processing-model:queue-an-element-task-2 href=webappapis.html#queue-an-element-task>queue an element task</a> on the
     <a id=script-processing-model:dom-manipulation-task-source-2 href=webappapis.html#dom-manipulation-task-source>DOM manipulation task source</a> given <var>el</var> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=script-processing-model:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=script-processing-model:event-error-2><a href=indices.html#event-error>error</a></code>
     at <var>el</var>, and return.<li><p>Set <var>el</var>'s <a href=#concept-script-external id=script-processing-model:concept-script-external>from an external file</a>
     to true.<li><p>Let <var>url</var> be the result of <a id=script-processing-model:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given
     <var>src</var>, relative to <var>el</var>'s <a id=script-processing-model:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>url</var> is failure, then <a id=script-processing-model:queue-an-element-task-3 href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=script-processing-model:dom-manipulation-task-source-3 href=webappapis.html#dom-manipulation-task-source>DOM
     manipulation task source</a> given <var>el</var> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=script-processing-model:concept-event-fire-3 data-x-internal=concept-event-fire>fire
     an event</a> named <code id=script-processing-model:event-error-3><a href=indices.html#event-error>error</a></code> at <var>el</var>, and
     return.<li><p>If <var>el</var> is <a id=script-processing-model:potentially-render-blocking href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>, then <a id=script-processing-model:block-rendering href=dom.html#block-rendering>block
     rendering</a> on <var>el</var>.<li><p>Set <var>el</var>'s <a href=#concept-script-delay-load id=script-processing-model:concept-script-delay-load-3>delaying the load
     event</a> to true.<li><p>If <var>el</var> is currently <a id=script-processing-model:render-blocking href=dom.html#render-blocking>render-blocking</a>, then set
     <var>options</var>'s <a href=webappapis.html#concept-script-fetch-options-render-blocking id=script-processing-model:concept-script-fetch-options-render-blocking>
     render-blocking</a> to true.<li>
      <p>Let <var>onComplete</var> given <var>result</var> be the following steps:</p>

      <ol><li><p><a href=#mark-as-ready id=script-processing-model:mark-as-ready>Mark as ready</a> <var>el</var> given <var>result</var>.</ol>
     <li>
      <p>Switch on <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-12>type</a>:</p>

      <dl class=switch><dt>"<code>classic</code>"<dd>
        <p><a id=script-processing-model:fetch-a-classic-script href=webappapis.html#fetch-a-classic-script>Fetch a classic script</a> given <var>url</var>, <var>settings object</var>,
        <var>options</var>, <var>classic script CORS setting</var>, <var>encoding</var>, and
        <var>onComplete</var>.</p>
       <dt>"<code>module</code>"<dd>
        <p>If <var>el</var> does not have an <code id=script-processing-model:attr-script-integrity-2><a href=#attr-script-integrity>integrity</a></code>
        attribute, then set <var>options</var>'s <a href=webappapis.html#concept-script-fetch-options-integrity id=script-processing-model:concept-script-fetch-options-integrity-2>integrity metadata</a> to the result of
        <a id=script-processing-model:resolving-a-module-integrity-metadata href=webappapis.html#resolving-a-module-integrity-metadata>resolving a module integrity metadata</a> with <var>url</var> and <var>settings
        object</var>.</p>

        <p><a id=script-processing-model:fetch-a-module-script-tree href=webappapis.html#fetch-a-module-script-tree>Fetch an external module script graph</a> given <var>url</var>, <var>settings
        object</var>, <var>options</var>, and <var>onComplete</var>.</p>
       </dl>

      <p>For performance reasons, user agents may start fetching the classic script or module graph
      (as defined above) as soon as the <code id=script-processing-model:attr-script-src-7><a href=#attr-script-src>src</a></code> attribute is set,
      instead, in the hope that <var>el</var> will become connected (and that the <code id=script-processing-model:attr-script-crossorigin-3><a href=#attr-script-crossorigin>crossorigin</a></code> attribute won't change value in the
      meantime). Either way, once <var>el</var> <a id=script-processing-model:becomes-connected href=infrastructure.html#becomes-connected>becomes connected</a>, the load must have
      started as described in this step. If the UA performs such prefetching, but <var>el</var>
      never becomes connected, or the <code id=script-processing-model:attr-script-src-8><a href=#attr-script-src>src</a></code> attribute is
      dynamically changed,  or the <code id=script-processing-model:attr-script-crossorigin-4><a href=#attr-script-crossorigin>crossorigin</a></code> attribute is dynamically changed, then the
      user agent will not execute the script so obtained, and the fetching process will have been
      effectively wasted.</p>
     </ol>
   <li id=establish-script-block-source>
    <p>If <var>el</var> does not have a <code id=script-processing-model:attr-script-src-9><a href=#attr-script-src>src</a></code> content
    attribute:</p>

    <ol><li><p>Let <var>base URL</var> be <var>el</var>'s <a id=script-processing-model:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=script-processing-model:document-base-url href=urls-and-fetching.html#document-base-url>document
     base URL</a>.<li>
      <p>Switch on <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-13>type</a>:</p>

      <dl class=switch><dt>"<code>classic</code>"<dd>
        <ol><li><p>Let <var>script</var> be the result of <a id=script-processing-model:creating-a-classic-script href=webappapis.html#creating-a-classic-script>creating a classic script</a> using
         <var>source text</var>, <var>settings object</var>, <var>base URL</var>, and
         <var>options</var>.<li><p><a href=#mark-as-ready id=script-processing-model:mark-as-ready-2>Mark as ready</a> <var>el</var> given <var>script</var>.</ol>
       <dt>"<code>module</code>"<dd>
        <ol><li><p>Set <var>el</var>'s <a href=#concept-script-delay-load id=script-processing-model:concept-script-delay-load-4>delaying the load
         event</a> to true.<li>
          <p>If <var>el</var> is <a id=script-processing-model:potentially-render-blocking-2 href=urls-and-fetching.html#potentially-render-blocking>potentially render-blocking</a>, then:</p>

          <ol><li><p><a id=script-processing-model:block-rendering-2 href=dom.html#block-rendering>Block rendering</a> on <var>el</var>.<li><p>Set <var>options</var>'s <a href=webappapis.html#concept-script-fetch-options-render-blocking id=script-processing-model:concept-script-fetch-options-render-blocking-2>render-blocking</a> to
           true.</ol>
         <li>
          <p><a id=script-processing-model:fetch-an-inline-module-script-graph href=webappapis.html#fetch-an-inline-module-script-graph>Fetch an inline module script graph</a>, given <var>source text</var>,
          <var>base URL</var>, <var>settings object</var>, <var>options</var>, and with the
          following steps given <var>result</var>:</p>

          <ol><li>
            <p><a id=script-processing-model:queue-an-element-task-4 href=webappapis.html#queue-an-element-task>Queue an element task</a> on the <a id=script-processing-model:networking-task-source href=webappapis.html#networking-task-source>networking task source</a>
            given <var>el</var> to perform the following steps:</p>

            <ol><li><p><a href=#mark-as-ready id=script-processing-model:mark-as-ready-3>Mark as ready</a> <var>el</var> given <var>result</var>.</ol>

            <p class=note>Queueing a task here means that, even if the inline module script has
            no dependencies or synchronously results in a parse error, we won't proceed to
            <a href=#execute-the-script-element id=script-processing-model:execute-the-script-element-2>execute the script element</a> synchronously.</p>
           </ol>
         </ol>
       <dt>"<code>importmap</code>"<dd>
        <ol><li><p>Let <var>result</var> be the result of <a href=webappapis.html#create-an-import-map-parse-result id=script-processing-model:create-an-import-map-parse-result>creating an import map parse result</a> given <var>source text</var> and
         <var>base URL</var>.<li><p><a href=#mark-as-ready id=script-processing-model:mark-as-ready-4>Mark as ready</a> <var>el</var> given <var>result</var>.</ol>
       <dt>"<code>speculationrules</code>"<dd>
        <ol><li><p>Let <var>result</var> be the result of <a href=webappapis.html#create-a-speculation-rules-parse-result id=script-processing-model:create-a-speculation-rules-parse-result>creating a speculation rules parse result</a> given <var>source text</var>
         and <var>document</var>.<li><p><a href=#mark-as-ready id=script-processing-model:mark-as-ready-5>Mark as ready</a> <var>el</var> given <var>result</var>.</ol>
       </dl>
     </ol>
   <li>
    <p>If <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-14>type</a> is "<code>classic</code>" and <var>el</var> has a <code id=script-processing-model:attr-script-src-10><a href=#attr-script-src>src</a></code>
    attribute, or <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-15>type</a> is "<code>module</code>":</p>

    <ol><li><p><a id=script-processing-model:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>el</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result-5>result</a>
     is "<code>uninitialized</code>".<li id=script-processing-src>
      <p id=script-processing-module-async>If <var>el</var> has an <code id=script-processing-model:attr-script-async-6><a href=#attr-script-async>async</a></code> attribute or <var>el</var>'s <a href=#script-force-async id=script-processing-model:script-force-async-4>force async</a> is true:</p>

      <ol><li><p>Let <var>scripts</var> be <var>el</var>'s <a href=#preparation-time-document id=script-processing-model:preparation-time-document-4>preparation-time document</a>'s
       <a href=#set-of-scripts-that-will-execute-as-soon-as-possible id=script-processing-model:set-of-scripts-that-will-execute-as-soon-as-possible>set of scripts that will execute as soon as possible</a>.<li><p><a href=https://infra.spec.whatwg.org/#set-append id=script-processing-model:set-append data-x-internal=set-append>Append</a> <var>el</var> to <var>scripts</var>.<li>
        <p>Set <var>el</var>'s <a href=#steps-to-run-when-the-result-is-ready id=script-processing-model:steps-to-run-when-the-result-is-ready-3>steps to run when the result is ready</a> to the
        following:</p>

        <ol><li><p><a href=#execute-the-script-element id=script-processing-model:execute-the-script-element-3>Execute the script element</a> <var>el</var>.<li><p><a href=https://infra.spec.whatwg.org/#list-remove id=script-processing-model:list-remove data-x-internal=list-remove>Remove</a> <var>el</var> from
         <var>scripts</var>.</ol>
       </ol>
     <li id=script-processing-src-sync>
      <p id=script-processing-module-noasync>Otherwise, if <var>el</var> is not
      <a href=#parser-inserted id=script-processing-model:parser-inserted-5>parser-inserted</a>:</p>

      <ol><li><p>Let <var>scripts</var> be <var>el</var>'s <a href=#preparation-time-document id=script-processing-model:preparation-time-document-5>preparation-time document</a>'s
       <a href=#list-of-scripts-that-will-execute-in-order-as-soon-as-possible id=script-processing-model:list-of-scripts-that-will-execute-in-order-as-soon-as-possible>list of scripts that will execute in order as soon as possible</a>.<li><p><a href=https://infra.spec.whatwg.org/#list-append id=script-processing-model:list-append data-x-internal=list-append>Append</a> <var>el</var> to <var>scripts</var>.<li>
        <p>Set <var>el</var>'s <a href=#steps-to-run-when-the-result-is-ready id=script-processing-model:steps-to-run-when-the-result-is-ready-4>steps to run when the result is ready</a> to the
        following:</p>

        <ol><li><p>If <var>scripts</var>[0] is not <var>el</var>, then abort these steps.<li>
          <p>While <var>scripts</var> is not empty, and <var>scripts</var>[0]'s <a href=#concept-script-result id=script-processing-model:concept-script-result-6>result</a> is not "<code>uninitialized</code>":</p>

          <ol><li><p><a href=#execute-the-script-element id=script-processing-model:execute-the-script-element-4>Execute the script element</a> <var>scripts</var>[0].<li><p><a href=https://infra.spec.whatwg.org/#list-remove id=script-processing-model:list-remove-2 data-x-internal=list-remove>Remove</a> <var>scripts</var>[0].</ol>
         </ol>
       </ol>
     <li id=script-processing-defer>
      <p id=script-processing-module-noasync-parser-inserted>Otherwise, if <var>el</var> has a
      <code id=script-processing-model:attr-script-defer-2><a href=#attr-script-defer>defer</a></code> attribute or <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-16>type</a> is "<code>module</code>":</p>


      <ol><li><p><a href=https://infra.spec.whatwg.org/#list-append id=script-processing-model:list-append-2 data-x-internal=list-append>Append</a> <var>el</var> to its <a href=#parser-document id=script-processing-model:parser-document-5>parser
       document</a>'s <a href=#list-of-scripts-that-will-execute-when-the-document-has-finished-parsing id=script-processing-model:list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will execute when the document has finished
       parsing</a>.<li><p>Set <var>el</var>'s <a href=#steps-to-run-when-the-result-is-ready id=script-processing-model:steps-to-run-when-the-result-is-ready-5>steps to run when the result is ready</a> to the
       following: set <var>el</var>'s <a href=#ready-to-be-parser-executed id=script-processing-model:ready-to-be-parser-executed>ready to be parser-executed</a> to true. (The parser
       will handle executing the script.)</ol>
     <li id=script-processing-parser-inserted>
      <p>Otherwise:</p>

      <ol><li><p>Set <var>el</var>'s <a href=#parser-document id=script-processing-model:parser-document-6>parser document</a>'s <a href=#pending-parsing-blocking-script id=script-processing-model:pending-parsing-blocking-script>pending parsing-blocking
       script</a> to <var>el</var>.<li><p><a id=script-processing-model:block-rendering-3 href=dom.html#block-rendering>Block rendering</a> on <var>el</var>.<li><p>Set <var>el</var>'s <a href=#steps-to-run-when-the-result-is-ready id=script-processing-model:steps-to-run-when-the-result-is-ready-6>steps to run when the result is ready</a> to the
       following: set <var>el</var>'s <a href=#ready-to-be-parser-executed id=script-processing-model:ready-to-be-parser-executed-2>ready to be parser-executed</a> to true. (The parser
       will handle executing the script.)</ol>
     </ol>
   <li>
    <p>Otherwise:</p>

    <ol><li><p><a id=script-processing-model:assert-2 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>el</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result-7>result</a>
     is <em>not</em> "<code>uninitialized</code>".<li id=script-processing-style-delayed>
      <p>If all of the following are true:</p>

      <ul><li><var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-17>type</a> is "<code>classic</code>";<li><var>el</var> is <a href=#parser-inserted id=script-processing-model:parser-inserted-6>parser-inserted</a>;<li><var>el</var>'s <a href=#parser-document id=script-processing-model:parser-document-7>parser document</a> <a id=script-processing-model:has-a-style-sheet-that-is-blocking-scripts href=semantics.html#has-a-style-sheet-that-is-blocking-scripts>has a style sheet that is blocking
       scripts</a>; and<li>either the parser that created <var>el</var> is an <a id=script-processing-model:xml-parser-3 href=xhtml.html#xml-parser>XML parser</a>, or it's an
       <a id=script-processing-model:html-parser-3 href=parsing.html#html-parser>HTML parser</a> whose <a id=script-processing-model:script-nesting-level href=parsing.html#script-nesting-level>script nesting level</a> is not greater than
       one,</ul>

      <p>then:</p>

      <ol><li><p>Set <var>el</var>'s <a href=#parser-document id=script-processing-model:parser-document-8>parser document</a>'s <a href=#pending-parsing-blocking-script id=script-processing-model:pending-parsing-blocking-script-2>pending parsing-blocking
       script</a> to <var>el</var>.<li><p>Set <var>el</var>'s <a href=#ready-to-be-parser-executed id=script-processing-model:ready-to-be-parser-executed-3>ready to be parser-executed</a> to true. (The parser
       will handle executing the script.)</ol>
     <li id=script-processing-inline><p>Otherwise, <a id=script-processing-model:immediately href=infrastructure.html#immediately>immediately</a> <a href=#execute-the-script-element id=script-processing-model:execute-the-script-element-5>execute the
     script element</a> <var>el</var>, even if other scripts are already executing.</ol>
   </ol>

  <p>Each <code id=script-processing-model:document-4><a href=dom.html#document>Document</a></code> has a <dfn id=pending-parsing-blocking-script>pending parsing-blocking script</dfn>, which is a
  <code id=script-processing-model:the-script-element-39><a href=#the-script-element>script</a></code> element or null, initially null.</p>

  <p>Each <code id=script-processing-model:document-5><a href=dom.html#document>Document</a></code> has a <dfn id=set-of-scripts-that-will-execute-as-soon-as-possible>set of scripts that will execute as soon as
  possible</dfn>, which is a <a id=script-processing-model:set href=https://infra.spec.whatwg.org/#ordered-set data-x-internal=set>set</a> of <code id=script-processing-model:the-script-element-40><a href=#the-script-element>script</a></code> elements, initially empty.</p>

  <p>Each <code id=script-processing-model:document-6><a href=dom.html#document>Document</a></code> has a <dfn id=list-of-scripts-that-will-execute-in-order-as-soon-as-possible>list of scripts that will execute in order as soon as
  possible</dfn>, which is a <a id=script-processing-model:list href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <code id=script-processing-model:the-script-element-41><a href=#the-script-element>script</a></code> elements, initially
  empty.</p>

  <p>Each <code id=script-processing-model:document-7><a href=dom.html#document>Document</a></code> has a <dfn id=list-of-scripts-that-will-execute-when-the-document-has-finished-parsing>list of scripts that will execute when the document has
  finished parsing</dfn>, which is a <a id=script-processing-model:list-2 href=https://infra.spec.whatwg.org/#list data-x-internal=list>list</a> of <code id=script-processing-model:the-script-element-42><a href=#the-script-element>script</a></code> elements, initially
  empty.</p>

  <p class=note>If a <code id=script-processing-model:the-script-element-43><a href=#the-script-element>script</a></code> element that blocks a parser gets moved to another
  <code id=script-processing-model:document-8><a href=dom.html#document>Document</a></code> before it would normally have stopped blocking that parser, it nonetheless
  continues blocking that parser until the condition that causes it to be blocking the parser no
  longer applies (e.g., if the script is a <a href=#pending-parsing-blocking-script id=script-processing-model:pending-parsing-blocking-script-3>pending parsing-blocking script</a> because the
  original <code id=script-processing-model:document-9><a href=dom.html#document>Document</a></code> <a id=script-processing-model:has-a-style-sheet-that-is-blocking-scripts-2 href=semantics.html#has-a-style-sheet-that-is-blocking-scripts>has a style sheet that is blocking scripts</a> when it was
  parsed, but then the script is moved to another <code id=script-processing-model:document-10><a href=dom.html#document>Document</a></code> before the blocking style
  sheet(s) loaded, the script still blocks the parser until the style sheets are all loaded, at
  which time the script executes and the parser is unblocked).</p>

  

  <p id=execute-the-script-block>To <dfn id=execute-the-script-element>execute the script element</dfn> given a
  <code id=script-processing-model:the-script-element-44><a href=#the-script-element>script</a></code> element <var>el</var>:</p>

  <ol><li><p>Let <var>document</var> be <var>el</var>'s <a id=script-processing-model:node-document-6 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>el</var>'s <a href=#preparation-time-document id=script-processing-model:preparation-time-document-6>preparation-time document</a> is not equal to
   <var>document</var>, then return.<li><p><a id=script-processing-model:unblock-rendering href=dom.html#unblock-rendering>Unblock rendering</a> on <var>el</var>.<li><p>If <var>el</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result-8>result</a> is null, then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=script-processing-model:concept-event-fire-4 data-x-internal=concept-event-fire>fire an event</a> named <code id=script-processing-model:event-error-4><a href=indices.html#event-error>error</a></code>
   at <var>el</var>, and return.<li><p>If <var>el</var>'s <a href=#concept-script-external id=script-processing-model:concept-script-external-2>from an external file</a> is
   true, or <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-18>type</a> is "<code>module</code>", then increment <var>document</var>'s <a id=script-processing-model:ignore-destructive-writes-counter href=dynamic-markup-insertion.html#ignore-destructive-writes-counter>ignore-destructive-writes
   counter</a>.<li>
    <p>Switch on <var>el</var>'s <a href=#concept-script-type id=script-processing-model:concept-script-type-19>type</a>:</p>

    <dl class=switch><dt>"<code>classic</code>"<dd>
      <ol><li><p>Let <var>oldCurrentScript</var> be the value to which <var>document</var>'s <code id=script-processing-model:dom-document-currentscript><a href=dom.html#dom-document-currentscript>currentScript</a></code> object was most recently
       set.<li>
        <p>If <var>el</var>'s <a id=script-processing-model:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a> is <em>not</em> a <a id=script-processing-model:shadow-root href=https://dom.spec.whatwg.org/#concept-shadow-root data-x-internal=shadow-root>shadow root</a>, then
        set <var>document</var>'s <code id=script-processing-model:dom-document-currentscript-2><a href=dom.html#dom-document-currentscript>currentScript</a></code>
        attribute to <var>el</var>. Otherwise, set it to null.</p>

        <p class=note>This does not use the <a id=script-processing-model:in-a-document-tree href=https://dom.spec.whatwg.org/#in-a-document-tree data-x-internal=in-a-document-tree>in a document tree</a> check, as
        <var>el</var> could have been removed from the document prior to execution, and in that
        scenario <code id=script-processing-model:dom-document-currentscript-3><a href=dom.html#dom-document-currentscript>currentScript</a></code> still needs to
        point to it.</p>
       <li><p><a href=webappapis.html#run-a-classic-script id=script-processing-model:run-a-classic-script>Run the classic script</a> given by
       <var>el</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result-9>result</a>.<li><p>Set <var>document</var>'s <code id=script-processing-model:dom-document-currentscript-4><a href=dom.html#dom-document-currentscript>currentScript</a></code> attribute to
       <var>oldCurrentScript</var>.</ol>
     <dt>"<code>module</code>"<dd>
      <ol><li><p><a id=script-processing-model:assert-3 href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>document</var>'s <code id=script-processing-model:dom-document-currentscript-5><a href=dom.html#dom-document-currentscript>currentScript</a></code> attribute is null.<li><p><a href=webappapis.html#run-a-module-script id=script-processing-model:run-a-module-script>Run the module script</a> given by
       <var>el</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result-10>result</a>.</ol>
     <dt>"<code>importmap</code>"<dd>
      <ol><li><p><a id=script-processing-model:register-an-import-map href=webappapis.html#register-an-import-map>Register an import map</a> given <var>el</var>'s <a id=script-processing-model:concept-relevant-global-2 href=webappapis.html#concept-relevant-global>relevant global
       object</a> and <var>el</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result-11>result</a>.</ol>
     <dt>"<code>speculationrules</code>"<dd>
      <ol><li><p><a id=script-processing-model:register-speculation-rules href=webappapis.html#register-speculation-rules>Register speculation rules</a> given <var>el</var>'s <a id=script-processing-model:concept-relevant-global-3 href=webappapis.html#concept-relevant-global>relevant global
       object</a> and <var>el</var>'s <a href=#concept-script-result id=script-processing-model:concept-script-result-12>result</a>.</ol>
     </dl>
   <li><p>Decrement the <a id=script-processing-model:ignore-destructive-writes-counter-2 href=dynamic-markup-insertion.html#ignore-destructive-writes-counter>ignore-destructive-writes counter</a> of <var>document</var>, if
   it was incremented in the earlier step.<li><p>If <var>el</var>'s <a href=#concept-script-external id=script-processing-model:concept-script-external-3>from an external file</a> is
   true, then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=script-processing-model:concept-event-fire-5 data-x-internal=concept-event-fire>fire an event</a> named <code id=script-processing-model:event-load><a href=indices.html#event-load>load</a></code> at <var>el</var>.</ol>

  


  <h5 id=scriptingLanguages><span class=secno>4.12.1.2</span> Scripting languages<a href=#scriptingLanguages class=self-link></a></h5>

  <p>User agents are not required to support JavaScript. This standard needs to be updated
  if a language other than JavaScript comes along and gets similar wide adoption by web browsers.
  Until such a time, implementing other languages is in conflict with this standard, given the
  processing model defined for the <code id=scriptingLanguages:the-script-element><a href=#the-script-element>script</a></code> element.</p>

  <p>Servers should use <code id=scriptingLanguages:text/javascript><a href=indices.html#text/javascript>text/javascript</a></code> for JavaScript resources, in accordance with
  <cite>Updates to ECMAScript Media Types</cite>. Servers should not use other
  <a href=https://mimesniff.spec.whatwg.org/#javascript-mime-type id=scriptingLanguages:javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME types</a> for JavaScript resources, and
  must not use non-<a href=https://mimesniff.spec.whatwg.org/#javascript-mime-type id=scriptingLanguages:javascript-mime-type-2 data-x-internal=javascript-mime-type>JavaScript MIME types</a>.
  <a href=references.html#refsRFC9239>[RFC9239]</a></p>

  

  <p>For external JavaScript resources, MIME type parameters in `<code id=scriptingLanguages:content-type><a href=urls-and-fetching.html#content-type>Content-Type</a></code>` headers
  are generally ignored. (In some cases the `<code>charset</code>` parameter has an
  effect.) However, for the <code id=scriptingLanguages:the-script-element-2><a href=#the-script-element>script</a></code> element's <code id=scriptingLanguages:attr-script-type><a href=#attr-script-type>type</a></code> attribute they are significant; it uses the <a id=scriptingLanguages:javascript-mime-type-essence-match href=https://mimesniff.spec.whatwg.org/#javascript-mime-type-essence-match data-x-internal=javascript-mime-type-essence-match>JavaScript
  MIME type essence match</a> concept.</p>

  <p class=note>For example, scripts with their <code id=scriptingLanguages:attr-script-type-2><a href=#attr-script-type>type</a></code>
  attribute set to "<code>text/javascript; charset=utf-8</code>" will not be
  evaluated, even though that is a valid <a id=scriptingLanguages:javascript-mime-type-3 href=https://mimesniff.spec.whatwg.org/#javascript-mime-type data-x-internal=javascript-mime-type>JavaScript MIME type</a> when parsed.</p>

  <p>Furthermore, again for external JavaScript resources, special considerations apply around
  `<code id=scriptingLanguages:content-type-2><a href=urls-and-fetching.html#content-type>Content-Type</a></code>` header processing as detailed in the <a href=#prepare-the-script-element id=scriptingLanguages:prepare-the-script-element>prepare the script
  element</a> algorithm and <cite>Fetch</cite>. <a href=references.html#refsFETCH>[FETCH]</a>

  </p>


  <h5 id=restrictions-for-contents-of-script-elements><span class=secno>4.12.1.3</span> <dfn>Restrictions for contents of <code>script</code> elements</dfn><a href=#restrictions-for-contents-of-script-elements class=self-link></a></h5>

  <p class=note>The easiest and safest way to avoid the rather strange restrictions described in
  this section is to always escape an ASCII case-insensitive match for "<code>&lt;!--</code>" as "<code>\x3C!--</code>", "<code>&lt;script</code>" as "<code>\x3Cscript</code>", and "<code>&lt;/script</code>" as "<code>\x3C/script</code>" when these sequences appear
  in literals in scripts (e.g. in strings, regular expressions, or comments), and to avoid writing
  code that uses such constructs in expressions. Doing so avoids the pitfalls that the restrictions
  in this section are prone to triggering: namely, that, for historical reasons, parsing of
  <code id=restrictions-for-contents-of-script-elements:the-script-element><a href=#the-script-element>script</a></code> blocks in HTML is a strange and exotic practice that acts unintuitively in the
  face of these sequences.</p>

  <p>The <code id=restrictions-for-contents-of-script-elements:the-script-element-2><a href=#the-script-element>script</a></code> element's <a id=restrictions-for-contents-of-script-elements:descendant-text-content href=https://dom.spec.whatwg.org/#concept-descendant-text-content data-x-internal=descendant-text-content>descendant text content</a> must match the <code>script</code> production in the following ABNF, the character set for which is Unicode.
  <a href=references.html#refsABNF>[ABNF]</a></p>

  <pre><code class='abnf'><c- nc>script</c->        <c- o>=</c-> <c- nc>outer</c-> <c- o>*</c-><c- p>(</c-> <c- nc>comment-open</c-> <c- nc>inner</c-> <c- nc>comment-close</c-> <c- nc>outer</c-> <c- p>)</c->

<c- nc>outer</c->         <c- o>=</c-> &lt; <c- nc>any</c-> <c- nc>string</c-> <c- nc>that</c-> <c- nc>doesn</c->&apos;t <c- nc>contain</c-> a <c- nc>substring</c-> <c- nc>that</c-> <c- nc>matches</c-> <c- nc>not-in-outer</c-> &gt;
<c- nc>not-in-outer</c->  <c- o>=</c-> <c- nc>comment-open</c->
<c- nc>inner</c->         <c- o>=</c-> &lt; <c- nc>any</c-> <c- nc>string</c-> <c- nc>that</c-> <c- nc>doesn</c->&apos;t <c- nc>contain</c-> a <c- nc>substring</c-> <c- nc>that</c-> <c- nc>matches</c-> <c- nc>not-in-inner</c-> &gt;
<c- nc>not-in-inner</c->  <c- o>=</c-> <c- nc>comment-close</c-> <c- o>/</c-> <c- nc>script-open</c->

<c- nc>comment-open</c->  <c- o>=</c-> <c- l>&quot;&lt;!--&quot;</c->
<c- nc>comment-close</c-> <c- o>=</c-> <c- l>&quot;--&gt;&quot;</c->
<c- nc>script-open</c->   <c- o>=</c-> <c- l>&quot;&lt;&quot;</c-> s c r i p t <c- nc>tag-end</c->

s             <c- o>=</c->  <c- l>%x0053</c-> <c- c1>; U+0053 LATIN CAPITAL LETTER S</c->
s             <c- o>=/</c-> <c- l>%x0073</c-> <c- c1>; U+0073 LATIN SMALL LETTER S</c->
c             <c- o>=</c->  <c- l>%x0043</c-> <c- c1>; U+0043 LATIN CAPITAL LETTER C</c->
c             <c- o>=/</c-> <c- l>%x0063</c-> <c- c1>; U+0063 LATIN SMALL LETTER C</c->
r             <c- o>=</c->  <c- l>%x0052</c-> <c- c1>; U+0052 LATIN CAPITAL LETTER R</c->
r             <c- o>=/</c-> <c- l>%x0072</c-> <c- c1>; U+0072 LATIN SMALL LETTER R</c->
i             <c- o>=</c->  <c- l>%x0049</c-> <c- c1>; U+0049 LATIN CAPITAL LETTER I</c->
i             <c- o>=/</c-> <c- l>%x0069</c-> <c- c1>; U+0069 LATIN SMALL LETTER I</c->
p             <c- o>=</c->  <c- l>%x0050</c-> <c- c1>; U+0050 LATIN CAPITAL LETTER P</c->
p             <c- o>=/</c-> <c- l>%x0070</c-> <c- c1>; U+0070 LATIN SMALL LETTER P</c->
t             <c- o>=</c->  <c- l>%x0054</c-> <c- c1>; U+0054 LATIN CAPITAL LETTER T</c->
t             <c- o>=/</c-> <c- l>%x0074</c-> <c- c1>; U+0074 LATIN SMALL LETTER T</c->

<c- nc>tag-end</c->       <c- o>=</c->  <c- l>%x0009</c-> <c- c1>; U+0009 CHARACTER TABULATION (tab)</c->
<c- nc>tag-end</c->       <c- o>=/</c-> <c- l>%x000A</c-> <c- c1>; U+000A LINE FEED (LF)</c->
<c- nc>tag-end</c->       <c- o>=/</c-> <c- l>%x000C</c-> <c- c1>; U+000C FORM FEED (FF)</c->
<c- nc>tag-end</c->       <c- o>=/</c-> <c- l>%x0020</c-> <c- c1>; U+0020 SPACE</c->
<c- nc>tag-end</c->       <c- o>=/</c-> <c- l>%x002F</c-> <c- c1>; U+002F SOLIDUS (/)</c->
<c- nc>tag-end</c->       <c- o>=/</c-> <c- l>%x003E</c-> <c- c1>; U+003E GREATER-THAN SIGN (&gt;)</c-></code></pre>

  <p>When a <code id=restrictions-for-contents-of-script-elements:the-script-element-3><a href=#the-script-element>script</a></code> element contains <a href=#inline-documentation-for-external-scripts id=restrictions-for-contents-of-script-elements:inline-documentation-for-external-scripts>script documentation</a>, there are
  further restrictions on the contents of the element, as described in the section below.</p>

  <div class=example>

   <p>The following script illustrates this issue. Suppose you have a script that contains a string,
   as in:</p>

   <pre><code class='js'><c- a>const</c-> example <c- o>=</c-> <c- t>&apos;Consider this string: &lt;!-- &lt;script&gt;&apos;</c-><c- p>;</c->
console<c- p>.</c->log<c- p>(</c->example<c- p>);</c-></code></pre>

   <p>If one were to put this string directly in a <code id=restrictions-for-contents-of-script-elements:the-script-element-4><a href=#the-script-element>script</a></code> block, it would violate the
   restrictions above:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>const</c-> example <c- o>=</c-> <c- t>&apos;Consider this string: &lt;!-- &lt;script&gt;&apos;</c-><c- p>;</c->
  console<c- p>.</c->log<c- p>(</c->example<c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>The bigger problem, though, and the reason why it would violate those restrictions, is that
   actually the script would get parsed weirdly: <em>the script block above is not terminated</em>.
   That is, what looks like a "<code>&lt;/script></code>" end tag in this snippet is
   actually still part of the <code id=restrictions-for-contents-of-script-elements:the-script-element-5><a href=#the-script-element>script</a></code> block. The script doesn't execute (since it's not
   terminated); if it somehow were to execute, as it might if the markup looked as follows, it would
   fail because the script (highlighted here) is not valid JavaScript:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c-><mark>
  <c- a>const</c-> example <c- o>=</c-> <c- t>&apos;Consider this string: &lt;!-- &lt;script&gt;&apos;</c-><c- p>;</c->
  console<c- p>.</c->log<c- p>(</c->example<c- p>);</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- c>&lt;!-- despite appearances, this is actually part of the script still! --&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- p>...</c-> <c- c1>// this is the same script block still...</c->
</mark><c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>What is going on here is that for legacy reasons, "<code>&lt;!--</code>" and "<code>&lt;script</code>" strings in <code id=restrictions-for-contents-of-script-elements:the-script-element-6><a href=#the-script-element>script</a></code> elements in HTML need to be balanced
   in order for the parser to consider closing the block.</p>

   <p>By escaping the problematic strings as mentioned at the top of this section, the problem is
   avoided entirely:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c-><mark>
  <c- c1>// Note: `\x3C` is an escape sequence for `&lt;`.</c->
  <c- a>const</c-> example <c- o>=</c-> <c- t>&apos;Consider this string: \x3C!-- \x3Cscript&gt;&apos;</c-><c- p>;</c->
  console<c- p>.</c->log<c- p>(</c->example<c- p>);</c->
</mark><c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- c>&lt;!-- this is just a comment between script blocks --&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c-><mark>
 <c- p>...</c-> <c- c1>// this is a new script block</c->
</mark><c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>It is possible for these sequences to naturally occur in script expressions, as in the
   following examples:</p>

   <pre><code class='js'><c- k>if</c-> <c- p>(</c->x<c- c>&lt;!--</c->y<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- k>if</c-> <c- p>(</c-> player<c- o>&lt;</c->script <c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c-></code></pre>

   <p>In such cases the characters cannot be escaped, but the expressions can be rewritten so that
   the sequences don't occur, as in:</p>

   <pre><code class='js'><c- k>if</c-> <c- p>(</c->x <c- o>&lt;</c-> <c- o>!--</c->y<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- k>if</c-> <c- p>(</c-><c- o>!--</c->y <c- o>&gt;</c-> x<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- k>if</c-> <c- p>(</c-><c- o>!</c-><c- p>(</c-><c- o>--</c->y<c- p>)</c-> <c- o>&gt;</c-> x<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- k>if</c-> <c- p>(</c->player <c- o>&lt;</c-> script<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c->
<c- k>if</c-> <c- p>(</c->script <c- o>&gt;</c-> player<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c-></code></pre>

   <p>Doing this also avoids a different pitfall as well: for related historical reasons, the string
   "&lt;!--" in <a href=webappapis.html#classic-script id=restrictions-for-contents-of-script-elements:classic-script>classic scripts</a> is actually treated as a line
   comment start, just like "//".</p>

  </div>


  <h5 id=inline-documentation-for-external-scripts><span class=secno>4.12.1.4</span> <dfn>Inline documentation for external scripts</dfn><a href=#inline-documentation-for-external-scripts class=self-link></a></h5>

  <p>If a <code id=inline-documentation-for-external-scripts:the-script-element><a href=#the-script-element>script</a></code> element's <code id=inline-documentation-for-external-scripts:attr-script-src><a href=#attr-script-src>src</a></code> attribute is
  specified, then the contents of the <code id=inline-documentation-for-external-scripts:the-script-element-2><a href=#the-script-element>script</a></code> element, if any, must be such that the
  value of the <code id=inline-documentation-for-external-scripts:dom-script-text><a href=#dom-script-text>text</a></code> IDL attribute, which is derived from the
  element's contents, matches the <code>documentation</code> production in the following
  ABNF, the character set for which is Unicode. <a href=references.html#refsABNF>[ABNF]</a></p>

  <pre><code class='abnf'><c- nc>documentation</c-> <c- o>=</c-> <c- o>*</c-><c- p>(</c-> <c- o>*</c-><c- p>(</c-> <c- nc>space</c-> <c- o>/</c-> <c- nc>tab</c-> <c- o>/</c-> <c- nc>comment</c-> <c- p>)</c-> <c- p>[</c-> <c- nc>line-comment</c-> <c- p>]</c-> <c- nc>newline</c-> <c- p>)</c->
<c- nc>comment</c->       <c- o>=</c-> <c- nc>slash</c-> <c- nc>star</c-> <c- o>*</c-><c- p>(</c-> <c- nc>not-star</c-> <c- o>/</c-> <c- nc>star</c-> <c- nc>not-slash</c-> <c- p>)</c-> <c- o>1*</c-><c- nc>star</c-> <c- nc>slash</c->
<c- nc>line-comment</c->  <c- o>=</c-> <c- nc>slash</c-> <c- nc>slash</c-> <c- o>*</c-><c- nc>not-newline</c->

<c- c1>; characters</c->
<c- nc>tab</c->           <c- o>=</c-> <c- l>%x0009</c-> <c- c1>; U+0009 CHARACTER TABULATION (tab)</c->
<c- nc>newline</c->       <c- o>=</c-> <c- l>%x000A</c-> <c- c1>; U+000A LINE FEED (LF)</c->
<c- nc>space</c->         <c- o>=</c-> <c- l>%x0020</c-> <c- c1>; U+0020 SPACE</c->
<c- nc>star</c->          <c- o>=</c-> <c- l>%x002A</c-> <c- c1>; U+002A ASTERISK (*)</c->
<c- nc>slash</c->         <c- o>=</c-> <c- l>%x002F</c-> <c- c1>; U+002F SOLIDUS (/)</c->
<c- nc>not-newline</c->   <c- o>=</c-> <c- l>%x0000-0009</c-> <c- o>/</c-> <c- l>%x000B-10FFFF</c->
                <c- c1>; a </c-><a id='inline-documentation-for-external-scripts:scalar-value' href='https://infra.spec.whatwg.org/#scalar-value' data-x-internal='scalar-value'><c- c1>scalar value</c-></a><c- c1> other than U+000A LINE FEED (LF)</c->
<c- nc>not-star</c->      <c- o>=</c-> <c- l>%x0000-0029</c-> <c- o>/</c-> <c- l>%x002B-10FFFF</c->
                <c- c1>; a </c-><a id='inline-documentation-for-external-scripts:scalar-value-2' href='https://infra.spec.whatwg.org/#scalar-value' data-x-internal='scalar-value'><c- c1>scalar value</c-></a><c- c1> other than U+002A ASTERISK (*)</c->
<c- nc>not-slash</c->     <c- o>=</c-> <c- l>%x0000-002E</c-> <c- o>/</c-> <c- l>%x0030-10FFFF</c->
                <c- c1>; a </c-><a id='inline-documentation-for-external-scripts:scalar-value-3' href='https://infra.spec.whatwg.org/#scalar-value' data-x-internal='scalar-value'><c- c1>scalar value</c-></a><c- c1> other than U+002F SOLIDUS (/)</c-></code></pre>

  <p class=note>This corresponds to putting the contents of the element in JavaScript
  comments.</p>

  <p class=note>This requirement is in addition to the earlier restrictions on the syntax of
  contents of <code id=inline-documentation-for-external-scripts:the-script-element-3><a href=#the-script-element>script</a></code> elements.</p>

  <div class=example>

   <p>This allows authors to include documentation, such as license information or API information,
   inside their documents while still referring to external script files. The syntax is constrained
   so that authors don't accidentally include what looks like valid script while also providing a
   <code id=inline-documentation-for-external-scripts:attr-script-src-2><a href=#attr-script-src>src</a></code> attribute.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>script</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;cool-effects.js&quot;</c-><c- p>&gt;</c->
 <c- c1>// create new instances using:</c->
 <c- c1>//    var e = new Effect();</c->
 <c- c1>// start the effect using .play, stop using .stop:</c->
 <c- c1>//    e.play();</c->
 <c- c1>//    e.stop();</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

  </div>


  

  <h5 id=scriptTagXSLT><span class=secno>4.12.1.5</span> Interaction of <code id=scriptTagXSLT:the-script-element><a href=#the-script-element>script</a></code> elements and XSLT<a href=#scriptTagXSLT class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>This specification does not define how XSLT interacts with the <code id=scriptTagXSLT:the-script-element-2><a href=#the-script-element>script</a></code> element.
  However, in the absence of another specification actually defining this, here are some guidelines
  for implementers, based on existing implementations:</p>

  <ul><li><p>When an XSLT transformation program is triggered by an <code>&lt;?xml-stylesheet?></code> processing instruction and the browser implements a
   direct-to-DOM transformation, <code id=scriptTagXSLT:the-script-element-3><a href=#the-script-element>script</a></code> elements created by the XSLT processor need to
   have its <a href=#parser-document id=scriptTagXSLT:parser-document>parser document</a> set correctly, and run in document order (modulo scripts
   marked <code id=scriptTagXSLT:attr-script-defer><a href=#attr-script-defer>defer</a></code> or <code id=scriptTagXSLT:attr-script-async><a href=#attr-script-async>async</a></code>), <a id=scriptTagXSLT:immediately href=infrastructure.html#immediately>immediately</a>, as the transformation is
   occurring.<li><p>The <code id=scriptTagXSLT:xsltprocessor><a href=infrastructure.html#xsltprocessor>XSLTProcessor</a></code> <code id=scriptTagXSLT:dom-xsltprocessor-transformtodocument><a href=infrastructure.html#dom-xsltprocessor-transformtodocument>transformToDocument()</a></code> method adds elements
   to a <code id=scriptTagXSLT:document><a href=dom.html#document>Document</a></code> object with a null <a href=document-sequences.html#concept-document-bc id=scriptTagXSLT:concept-document-bc>browsing
   context</a>, and, accordingly, any <code id=scriptTagXSLT:the-script-element-4><a href=#the-script-element>script</a></code> elements they create need to have
   their <a href=#already-started id=scriptTagXSLT:already-started>already started</a> set to true in the <a href=#prepare-the-script-element id=scriptTagXSLT:prepare-the-script-element>prepare the script element</a>
   algorithm and never get executed (<a href=webappapis.html#concept-environment-noscript id=scriptTagXSLT:concept-environment-noscript>scripting is
   disabled</a>). Such <code id=scriptTagXSLT:the-script-element-5><a href=#the-script-element>script</a></code> elements still need to have their <a href=#parser-document id=scriptTagXSLT:parser-document-2>parser
   document</a> set, though, such that their <code id=scriptTagXSLT:dom-script-async><a href=#dom-script-async>async</a></code> IDL
   attribute will return false in the absence of an <code id=scriptTagXSLT:attr-script-async-2><a href=#attr-script-async>async</a></code>
   content attribute.<li><p>The <code id=scriptTagXSLT:xsltprocessor-2><a href=infrastructure.html#xsltprocessor>XSLTProcessor</a></code> <code id=scriptTagXSLT:dom-xsltprocessor-transformtofragment><a href=infrastructure.html#dom-xsltprocessor-transformtofragment>transformToFragment()</a></code> method needs to
   create a fragment that is equivalent to one built manually by creating the elements using <code id=scriptTagXSLT:dom-document-createelementns><a data-x-internal=dom-document-createelementns href=https://dom.spec.whatwg.org/#dom-document-createelementns>document.createElementNS()</a></code>. For instance, it needs
   to create <code id=scriptTagXSLT:the-script-element-6><a href=#the-script-element>script</a></code> elements with null <a href=#parser-document id=scriptTagXSLT:parser-document-3>parser document</a> and with their
   <a href=#already-started id=scriptTagXSLT:already-started-2>already started</a> set to false, so that they will execute when the fragment is
   inserted into a document.</ul>

  <p>The main distinction between the first two cases and the last case is that the first two
  operate on <code id=scriptTagXSLT:document-2><a href=dom.html#document>Document</a></code>s and the last operates on a fragment.</p>

  



  <h4 id=the-noscript-element><span class=secno>4.12.2</span> The <dfn data-dfn-type=element><code>noscript</code></dfn> element<a href=#the-noscript-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript title="The <noscript> HTML element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.">Element/noscript</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <dl class=element><dt><a href=dom.html#concept-element-categories id=the-noscript-element:concept-element-categories>Categories</a>:<dd><a id=the-noscript-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dd><a id=the-noscript-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-noscript-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-noscript-element:select-element-inner-content-elements-2 href=dom.html#select-element-inner-content-elements-2><code>select</code> element inner content elements</a>.<dd><a id=the-noscript-element:optgroup-element-inner-content-elements-2 href=dom.html#optgroup-element-inner-content-elements-2><code>optgroup</code> element inner content elements</a>.<dt><a href=dom.html#concept-element-contexts id=the-noscript-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>In a <code id=the-noscript-element:the-head-element><a href=semantics.html#the-head-element>head</a></code> element of an <a href=https://dom.spec.whatwg.org/#html-document id=the-noscript-element:html-documents data-x-internal=html-documents>HTML document</a>, if there are no ancestor <code id=the-noscript-element:the-noscript-element><a href=#the-noscript-element>noscript</a></code> elements.<dd>Where <a id=the-noscript-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected in <a id=the-noscript-element:html-documents-2 href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, if there are no ancestor <code id=the-noscript-element:the-noscript-element-2><a href=#the-noscript-element>noscript</a></code> elements.<dt><a href=dom.html#concept-element-content-model id=the-noscript-element:concept-element-content-model>Content model</a>:<dd>When <a href=webappapis.html#concept-n-noscript id=the-noscript-element:concept-n-noscript>scripting is disabled</a>, in a <code id=the-noscript-element:the-head-element-2><a href=semantics.html#the-head-element>head</a></code> element: in any order, zero or more <code id=the-noscript-element:the-link-element><a href=semantics.html#the-link-element>link</a></code> elements, zero or more <code id=the-noscript-element:the-style-element><a href=semantics.html#the-style-element>style</a></code> elements, and zero or more <code id=the-noscript-element:the-meta-element><a href=semantics.html#the-meta-element>meta</a></code> elements.<dd>When <a href=webappapis.html#concept-n-noscript id=the-noscript-element:concept-n-noscript-2>scripting is disabled</a>, not in a <code id=the-noscript-element:the-head-element-3><a href=semantics.html#the-head-element>head</a></code> element: <a id=the-noscript-element:transparent href=dom.html#transparent>transparent</a>, but there must be no <code id=the-noscript-element:the-noscript-element-3><a href=#the-noscript-element>noscript</a></code> element descendants.<dd>Otherwise: text that conforms to the requirements given in the prose.<dt><a href=dom.html#concept-element-tag-omission id=the-noscript-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-noscript-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-noscript-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dt><a href=dom.html#concept-element-accessibility-considerations id=the-noscript-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-noscript>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-noscript>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-noscript-element:concept-element-dom>DOM interface</a>:<dd>Uses <code id=the-noscript-element:htmlelement><a href=dom.html#htmlelement>HTMLElement</a></code>.</dl>

  <p>The <code id=the-noscript-element:the-noscript-element-4><a href=#the-noscript-element>noscript</a></code> element <a id=the-noscript-element:represents href=dom.html#represents>represents</a> nothing if <a href=webappapis.html#concept-n-script id=the-noscript-element:concept-n-script>scripting is enabled</a>, and <a id=the-noscript-element:represents-2 href=dom.html#represents>represents</a> its children if
  <a href=webappapis.html#concept-n-noscript id=the-noscript-element:concept-n-noscript-3>scripting is disabled</a>. It is used to present different
  markup to user agents that support scripting and those that don't support scripting, by affecting
  how the document is parsed.</p>

  <p>When used in <a id=the-noscript-element:html-documents-3 href=https://dom.spec.whatwg.org/#html-document data-x-internal=html-documents>HTML documents</a>, the allowed content model is as follows:</p>

  <dl><dt>In a <code id=the-noscript-element:the-head-element-4><a href=semantics.html#the-head-element>head</a></code> element, if <a href=webappapis.html#concept-n-noscript id=the-noscript-element:concept-n-noscript-4>scripting is
   disabled</a> for the <code id=the-noscript-element:the-noscript-element-5><a href=#the-noscript-element>noscript</a></code> element<dd><p>The <code id=the-noscript-element:the-noscript-element-6><a href=#the-noscript-element>noscript</a></code> element must contain only <code id=the-noscript-element:the-link-element-2><a href=semantics.html#the-link-element>link</a></code>, <code id=the-noscript-element:the-style-element-2><a href=semantics.html#the-style-element>style</a></code>,
   and <code id=the-noscript-element:the-meta-element-2><a href=semantics.html#the-meta-element>meta</a></code> elements.<dt>In a <code id=the-noscript-element:the-head-element-5><a href=semantics.html#the-head-element>head</a></code> element, if <a href=webappapis.html#concept-n-script id=the-noscript-element:concept-n-script-2>scripting is enabled</a>
   for the <code id=the-noscript-element:the-noscript-element-7><a href=#the-noscript-element>noscript</a></code> element<dd><p>The <code id=the-noscript-element:the-noscript-element-8><a href=#the-noscript-element>noscript</a></code> element must contain only text, except that invoking the
   <a id=the-noscript-element:html-fragment-parsing-algorithm href=parsing.html#html-fragment-parsing-algorithm>HTML fragment parsing algorithm</a>  with
   the <code id=the-noscript-element:the-noscript-element-9><a href=#the-noscript-element>noscript</a></code> element as the <var id=the-noscript-element:concept-frag-parse-context><a href=parsing.html#concept-frag-parse-context>context</a></var>
   element and the text contents as the <var>input</var> must result in a list of nodes
   that consists only of <code id=the-noscript-element:the-link-element-3><a href=semantics.html#the-link-element>link</a></code>, <code id=the-noscript-element:the-style-element-3><a href=semantics.html#the-style-element>style</a></code>, and <code id=the-noscript-element:the-meta-element-3><a href=semantics.html#the-meta-element>meta</a></code> elements that
   would be conforming if they were children of the <code id=the-noscript-element:the-noscript-element-10><a href=#the-noscript-element>noscript</a></code> element, and no <a href=parsing.html#parse-errors id=the-noscript-element:parse-errors>parse errors</a>.<dt>Outside of <code id=the-noscript-element:the-head-element-6><a href=semantics.html#the-head-element>head</a></code> elements, if <a href=webappapis.html#concept-n-noscript id=the-noscript-element:concept-n-noscript-5>scripting is
   disabled</a> for the <code id=the-noscript-element:the-noscript-element-11><a href=#the-noscript-element>noscript</a></code> element<dd><p>The <code id=the-noscript-element:the-noscript-element-12><a href=#the-noscript-element>noscript</a></code> element's content model is <a id=the-noscript-element:transparent-2 href=dom.html#transparent>transparent</a>, with the
   additional restriction that a <code id=the-noscript-element:the-noscript-element-13><a href=#the-noscript-element>noscript</a></code> element must not have a <code id=the-noscript-element:the-noscript-element-14><a href=#the-noscript-element>noscript</a></code>
   element as an ancestor (that is, <code id=the-noscript-element:the-noscript-element-15><a href=#the-noscript-element>noscript</a></code> can't be nested).<dt>Outside of <code id=the-noscript-element:the-head-element-7><a href=semantics.html#the-head-element>head</a></code> elements, if <a href=webappapis.html#concept-n-script id=the-noscript-element:concept-n-script-3>scripting is
   enabled</a> for the <code id=the-noscript-element:the-noscript-element-16><a href=#the-noscript-element>noscript</a></code> element<dd>
    <p>The <code id=the-noscript-element:the-noscript-element-17><a href=#the-noscript-element>noscript</a></code> element must contain only text, except that the text must be such
    that running the following algorithm results in a conforming document with no
    <code id=the-noscript-element:the-noscript-element-18><a href=#the-noscript-element>noscript</a></code> elements and no <code id=the-noscript-element:the-script-element><a href=#the-script-element>script</a></code> elements, and such that no step in the
    algorithm throws an exception or causes an <a id=the-noscript-element:html-parser href=parsing.html#html-parser>HTML parser</a> to flag a <a id=the-noscript-element:parse-errors-2 href=parsing.html#parse-errors>parse
    error</a>:</p>
    

    <ol><li>Remove every <code id=the-noscript-element:the-script-element-2><a href=#the-script-element>script</a></code> element from the document.<li>Make a list of every <code id=the-noscript-element:the-noscript-element-19><a href=#the-noscript-element>noscript</a></code> element in the document. For every
     <code id=the-noscript-element:the-noscript-element-20><a href=#the-noscript-element>noscript</a></code> element in that list, perform the following steps:

      <ol><li>Let <var>s</var> be the <a id=the-noscript-element:child-text-content href=https://dom.spec.whatwg.org/#concept-child-text-content data-x-internal=child-text-content>child text content</a> of the <code id=the-noscript-element:the-noscript-element-21><a href=#the-noscript-element>noscript</a></code>
       element.<li>Set the <code id=the-noscript-element:dom-element-outerhtml><a href=dynamic-markup-insertion.html#dom-element-outerhtml>outerHTML</a></code> attribute of the
       <code id=the-noscript-element:the-noscript-element-22><a href=#the-noscript-element>noscript</a></code> element to the value of <var>s</var>. (This, as a side-effect, causes
       the <code id=the-noscript-element:the-noscript-element-23><a href=#the-noscript-element>noscript</a></code> element to be removed from the document.)</ol>
     </ol>
   </dl>

  <p class=note>All these contortions are required because, for historical reasons, the
  <code id=the-noscript-element:the-noscript-element-24><a href=#the-noscript-element>noscript</a></code> element is handled differently by the <a id=the-noscript-element:html-parser-2 href=parsing.html#html-parser>HTML parser</a> based on
  whether <a href=parsing.html#scripting-flag id=the-noscript-element:scripting-flag>scripting was enabled or not</a> when the parser was
  invoked.</p>

  <p>The <code id=the-noscript-element:the-noscript-element-25><a href=#the-noscript-element>noscript</a></code> element must not be used in <a id=the-noscript-element:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>.</p>

  <p class=note>The <code id=the-noscript-element:the-noscript-element-26><a href=#the-noscript-element>noscript</a></code> element is only effective in <a id=the-noscript-element:syntax href=syntax.html#syntax>the HTML
  syntax</a>, it has no effect in <a id=the-noscript-element:the-xhtml-syntax href=xhtml.html#the-xhtml-syntax>the XML syntax</a>. This is because the way it works
  is by essentially "turning off" the parser when scripts are enabled, so that the contents of the
  element are treated as pure text and not as real elements. XML does not define a mechanism by
  which to do this.</p>

  

  <p>The <code id=the-noscript-element:the-noscript-element-27><a href=#the-noscript-element>noscript</a></code> element has no other requirements. In particular, children of the
  <code id=the-noscript-element:the-noscript-element-28><a href=#the-noscript-element>noscript</a></code> element are not exempt from <a id=the-noscript-element:form-submission-2 href=form-control-infrastructure.html#form-submission-2>form submission</a>, scripting, and so
  forth, even when <a href=webappapis.html#concept-n-script id=the-noscript-element:concept-n-script-4>scripting is enabled</a> for the element.</p>

  

  <div class=example>

   <p>In the following example, a <code id=the-noscript-element:the-noscript-element-29><a href=#the-noscript-element>noscript</a></code> element is
   used to provide fallback for a script.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;calcSquare.php&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>x</c-><c- p>&gt;</c->Number<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->:
  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;x&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;x&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>var</c-> x <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;x&apos;</c-><c- p>);</c->
  <c- a>var</c-> output <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;p&apos;</c-><c- p>);</c->
  output<c- p>.</c->textContent <c- o>=</c-> <c- t>&apos;Type a number; it will be squared right then!&apos;</c-><c- p>;</c->
  x<c- p>.</c->form<c- p>.</c->appendChild<c- p>(</c->output<c- p>);</c->
  x<c- p>.</c->form<c- p>.</c->onsubmit <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- kc>false</c-><c- p>;</c-> <c- p>}</c->
  x<c- p>.</c->oninput <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
    <c- a>var</c-> v <c- o>=</c-> x<c- p>.</c->valueAsNumber<c- p>;</c->
    output<c- p>.</c->textContent <c- o>=</c-> v <c- o>+</c-> <c- t>&apos; squared is &apos;</c-> <c- o>+</c-> v <c- o>*</c-> v<c- p>;</c->
  <c- p>};</c->
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>noscript</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Calculate Square&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>noscript</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

   <p>When script is disabled, a button appears to do the calculation on the server side. When
   script is enabled, the value is computed on-the-fly instead.</p>

   <p>The <code id=the-noscript-element:the-noscript-element-30><a href=#the-noscript-element>noscript</a></code> element is a blunt instrument. Sometimes, scripts might be enabled,
   but for some reason the page's script might fail. For this reason, it's generally better to avoid
   using <code id=the-noscript-element:the-noscript-element-31><a href=#the-noscript-element>noscript</a></code>, and to instead design the script to change the page from being a
   scriptless page to a scripted page on the fly, as in the next example:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>form</c-> <c- e>action</c-><c- o>=</c-><c- s>&quot;calcSquare.php&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>label</c-> <c- e>for</c-><c- o>=</c-><c- s>x</c-><c- p>&gt;</c->Number<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c->:
  <c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;x&quot;</c-> <c- e>name</c-><c- o>=</c-><c- s>&quot;x&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;number&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>input</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;submit&quot;</c-> <c- e>type</c-><c- o>=</c-><c- s>submit</c-> <c- e>value</c-><c- o>=</c-><c- s>&quot;Calculate Square&quot;</c-><c- p>&gt;</c-></strong>
 <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- a>var</c-> x <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;x&apos;</c-><c- p>);</c->
  <c- a>var</c-> output <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- t>&apos;p&apos;</c-><c- p>);</c->
  output<c- p>.</c->textContent <c- o>=</c-> <c- t>&apos;Type a number; it will be squared right then!&apos;</c-><c- p>;</c->
  x<c- p>.</c->form<c- p>.</c->appendChild<c- p>(</c->output<c- p>);</c->
  x<c- p>.</c->form<c- p>.</c->onsubmit <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c-> <c- k>return</c-> <c- kc>false</c-><c- p>;</c-> <c- p>}</c->
  x<c- p>.</c->oninput <c- o>=</c-> <c- a>function</c-> <c- p>()</c-> <c- p>{</c->
    <c- a>var</c-> v <c- o>=</c-> x<c- p>.</c->valueAsNumber<c- p>;</c->
    output<c- p>.</c->textContent <c- o>=</c-> v <c- o>+</c-> <c- t>&apos; squared is &apos;</c-> <c- o>+</c-> v <c- o>*</c-> v<c- p>;</c->
  <c- p>};</c->
<strong>  <c- a>var</c-> submit <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;submit&apos;</c-><c- p>);</c->
  submit<c- p>.</c->parentNode<c- p>.</c->removeChild<c- p>(</c->submit<c- p>);</c-></strong>
 <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>form</c-><c- p>&gt;</c-></code></pre>

   <p>The above technique is also useful in <a id=the-noscript-element:xml-documents-2 href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a>, since <code id=the-noscript-element:the-noscript-element-32><a href=#the-noscript-element>noscript</a></code>
   is not allowed there.</p>

  </div>


  <h4 id=the-template-element><span class=secno>4.12.3</span> The <dfn data-dfn-type=element><code>template</code></dfn> element<a href=#the-template-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template title="The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.">Element/template</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span>26+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>Yes</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement title="The HTMLTemplateElement interface enables access to the contents of an HTML <template> element.">HTMLTemplateElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span>26+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-template-element:concept-element-categories>Categories</a>:<dd><a id=the-template-element:metadata-content-2 href=dom.html#metadata-content-2>Metadata content</a>.<dd><a id=the-template-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-template-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a href=dom.html#script-supporting-elements-2 id=the-template-element:script-supporting-elements-2>Script-supporting element</a>.<dt><a href=dom.html#concept-element-contexts id=the-template-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-template-element:metadata-content-2-2 href=dom.html#metadata-content-2>metadata content</a> is expected.<dd>Where <a id=the-template-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dd>Where <a id=the-template-element:script-supporting-elements-2-2 href=dom.html#script-supporting-elements-2>script-supporting elements</a> are expected.<dd>As a child of a <code id=the-template-element:the-colgroup-element><a href=tables.html#the-colgroup-element>colgroup</a></code> element that doesn't have a <code id=the-template-element:attr-colgroup-span><a href=tables.html#attr-colgroup-span>span</a></code> attribute.<dt><a href=dom.html#concept-element-content-model id=the-template-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-template-element:concept-content-nothing>Nothing</a> (for clarification, <a href=#template-example>see example</a>).<dt><a href=dom.html#concept-element-tag-omission id=the-template-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-template-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-template-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-template-element:attr-template-shadowrootmode><a href=#attr-template-shadowrootmode>shadowrootmode</a></code> —  Enables streaming declarative shadow roots
     <dd><code id=the-template-element:attr-template-shadowrootdelegatesfocus><a href=#attr-template-shadowrootdelegatesfocus>shadowrootdelegatesfocus</a></code> —  Sets <a id=the-template-element:delegates-focus href=https://dom.spec.whatwg.org/#shadowroot-delegates-focus data-x-internal=delegates-focus>delegates focus</a> on a declarative shadow root
     <dd><code id=the-template-element:attr-template-shadowrootclonable><a href=#attr-template-shadowrootclonable>shadowrootclonable</a></code> —  Sets <a id=the-template-element:clonable href=https://dom.spec.whatwg.org/#shadowroot-clonable data-x-internal=clonable>clonable</a> on a declarative shadow root
     <dd><code id=the-template-element:attr-template-shadowrootserializable><a href=#attr-template-shadowrootserializable>shadowrootserializable</a></code> —  Sets <a id=the-template-element:serializable href=structured-data.html#serializable>serializable</a> on a declarative shadow root
     <dd><code id=the-template-element:attr-template-shadowrootcustomelementregistry><a href=#attr-template-shadowrootcustomelementregistry>shadowrootcustomelementregistry</a></code> —  Enables declarative shadow roots to indicate they will use a custom element registry
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-template-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-template>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-template>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-template-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmltemplateelement' data-dfn-type='interface'><c- g>HTMLTemplateElement</c-></dfn> : <a id='the-template-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-template-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-template-element:documentfragment' href='https://dom.spec.whatwg.org/#interface-documentfragment' data-x-internal='documentfragment'><c- n>DocumentFragment</c-></a> <a href='#dom-template-content' id='the-template-element:dom-template-content'><c- g>content</c-></a>;
  [<a id='the-template-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-template-shadowrootmode' id='the-template-element:dom-template-shadowrootmode'><c- g>shadowRootMode</c-></a>;
  [<a id='the-template-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-template-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLTemplateElement' id='dom-template-shadowrootdelegatesfocus' data-dfn-type='attribute'><c- g>shadowRootDelegatesFocus</c-></dfn>;
  [<a id='the-template-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-template-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLTemplateElement' id='dom-template-shadowrootclonable' data-dfn-type='attribute'><c- g>shadowRootClonable</c-></dfn>;
  [<a id='the-template-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-template-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLTemplateElement' id='dom-template-shadowrootserializable' data-dfn-type='attribute'><c- g>shadowRootSerializable</c-></dfn>;
  [<a id='the-template-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-template-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLTemplateElement' id='dom-template-shadowrootcustomelementregistry' data-dfn-type='attribute'><c- g>shadowRootCustomElementRegistry</c-></dfn>;
};</code></pre>
</dl>

  <p>The <code id=the-template-element:the-template-element><a href=#the-template-element>template</a></code> element is used to declare fragments of HTML that can be cloned and
  inserted in the document by script.</p>

  <p>In a rendering, the <code id=the-template-element:the-template-element-2><a href=#the-template-element>template</a></code> element <a id=the-template-element:represents href=dom.html#represents>represents</a> nothing.</p>

  <p>The <dfn data-dfn-for=template id=attr-template-shadowrootmode data-dfn-type=element-attr><code>shadowrootmode</code></dfn> content attribute is an
  <a id=the-template-element:enumerated-attribute href=common-microsyntaxes.html#enumerated-attribute>enumerated attribute</a> with the following keywords and states:</p>

  <table><thead><tr><th>Keyword
     <th>State
     <th>Brief description
   <tbody><tr><td><dfn data-dfn-for=template/shadowrootmode id=attr-shadowrootmode-open data-dfn-type=attr-value><code>open</code></dfn>
     <td><dfn id=attr-shadowrootmode-open-state>Open</dfn>
     <td>The template element represents an open declarative shadow root.
    <tr><td><dfn data-dfn-for=template/shadowrootmode id=attr-shadowrootmode-closed data-dfn-type=attr-value><code>closed</code></dfn>
     <td><dfn id=attr-shadowrootmode-closed-state>Closed</dfn>
     <td>The template element represents a closed declarative shadow root.
  </table>

  <p>The <code id=the-template-element:attr-template-shadowrootmode-2><a href=#attr-template-shadowrootmode>shadowrootmode</a></code> attribute's <i id=the-template-element:invalid-value-default><a href=common-microsyntaxes.html#invalid-value-default>invalid value default</a></i> and <i id=the-template-element:missing-value-default><a href=common-microsyntaxes.html#missing-value-default>missing value default</a></i> are both the <dfn id=attr-shadowrootmode-none-state>None</dfn> state.</p>

  <p>The <dfn data-dfn-for=template id=attr-template-shadowrootdelegatesfocus data-dfn-type=element-attr><code>shadowrootdelegatesfocus</code></dfn> content
  attribute is a <a id=the-template-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.</p>

  <p>The <dfn data-dfn-for=template id=attr-template-shadowrootclonable data-dfn-type=element-attr><code>shadowrootclonable</code></dfn> content attribute is a
  <a id=the-template-element:boolean-attribute-2 href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.</p>

  <p>The <dfn data-dfn-for=template id=attr-template-shadowrootserializable data-dfn-type=element-attr><code>shadowrootserializable</code></dfn> content
  attribute is a <a id=the-template-element:boolean-attribute-3 href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.</p>

  <p>The <dfn data-dfn-for=template id=attr-template-shadowrootcustomelementregistry data-dfn-type=element-attr><code>shadowrootcustomelementregistry</code></dfn>
  content attribute is a <a id=the-template-element:boolean-attribute-4 href=common-microsyntaxes.html#boolean-attribute>boolean attribute</a>.</p>

  <p>The <a href=#template-contents id=the-template-element:template-contents>template contents</a> of a <code id=the-template-element:the-template-element-3><a href=#the-template-element>template</a></code> element <a href=syntax.html#template-syntax>are not children of the element itself</a>.</p>

  <p class=note>It is also possible, as a result of DOM manipulation, for a <code id=the-template-element:the-template-element-4><a href=#the-template-element>template</a></code>
  element to contain <code id=the-template-element:text><a data-x-internal=text href=https://dom.spec.whatwg.org/#interface-text>Text</a></code> nodes and element nodes; however, having any is a violation
  of the <code id=the-template-element:the-template-element-5><a href=#the-template-element>template</a></code> element's content model, since its content model is defined as <a href=dom.html#concept-content-nothing id=the-template-element:concept-content-nothing-2>nothing</a>.</p>

  <div id=template-example class=example><a href=#template-example class=self-link></a>

   <p>For example, consider the following document:</p>

   

   <pre><code class='html'><c- cp>&lt;!doctype html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&quot;en&quot;</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>head</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Homework<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>body</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>template</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;template&quot;</c-><c- p>&gt;&lt;</c-><c- f>p</c-><c- p>&gt;</c->Smile!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;&lt;/</c-><c- f>template</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
   <c- a>let</c-> num <c- o>=</c-> <c- mf>3</c-><c- p>;</c->
   <c- a>const</c-> fragment <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;template&apos;</c-><c- p>).</c->content<c- p>.</c->cloneNode<c- p>(</c-><c- kc>true</c-><c- p>);</c->
   <c- k>while</c-> <c- p>(</c->num<c- o>--</c-> <c- o>&gt;</c-> <c- mf>1</c-><c- p>)</c-> <c- p>{</c->
     fragment<c- p>.</c->firstChild<c- p>.</c->before<c- p>(</c->fragment<c- p>.</c->firstChild<c- p>.</c->cloneNode<c- p>(</c-><c- kc>true</c-><c- p>));</c->
     fragment<c- p>.</c->firstChild<c- p>.</c->textContent <c- o>+=</c-> fragment<c- p>.</c->lastChild<c- p>.</c->textContent<c- p>;</c->
   <c- p>}</c->
   document<c- p>.</c->body<c- p>.</c->appendChild<c- p>(</c->fragment<c- p>);</c->
  <c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>&gt;</c-></code></pre>

   <p>The <code id=the-template-element:the-p-element><a href=grouping-content.html#the-p-element>p</a></code> element in the <code id=the-template-element:the-template-element-6><a href=#the-template-element>template</a></code> is <em>not</em> a child of the
   <code id=the-template-element:the-template-element-7><a href=#the-template-element>template</a></code> in the DOM; it is a child of the <code id=the-template-element:documentfragment-2><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> returned by
   the <code id=the-template-element:the-template-element-8><a href=#the-template-element>template</a></code> element's <code id=the-template-element:dom-template-content-2><a href=#dom-template-content>content</a></code> IDL
   attribute.</p>

   <p>If the script were to call <code id=the-template-element:dom-node-appendchild><a data-x-internal=dom-node-appendchild href=https://dom.spec.whatwg.org/#dom-node-appendchild>appendChild()</a></code> on the
   <code id=the-template-element:the-template-element-9><a href=#the-template-element>template</a></code> element, that would add a child to the <code id=the-template-element:the-template-element-10><a href=#the-template-element>template</a></code> element (as
   for any other element); however, doing so is a violation of the <code id=the-template-element:the-template-element-11><a href=#the-template-element>template</a></code> element's
   content model.</p>

  </div>

  <dl class=domintro><dt><code><var>template</var>.<a href=#dom-template-content id=dom-template-content-dev>content</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLTemplateElement/content title="The HTMLTemplateElement.content property returns a <template> element's template contents (a DocumentFragment).">HTMLTemplateElement/content</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>8+</span></span><span class="chrome yes"><span>Chrome</span><span>26+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>13+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd><p>Returns the <a href=#template-contents id=the-template-element:template-contents-2>template contents</a> (a <code id=the-template-element:documentfragment-3><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code>).</dl>

  

  <p>Each <code id=the-template-element:the-template-element-12><a href=#the-template-element>template</a></code> element has an associated <code id=the-template-element:documentfragment-4><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> object that
  is its <dfn id=template-contents>template contents</dfn>. The <a href=#template-contents id=the-template-element:template-contents-3>template contents</a> have <a href=dom.html#no-browsing-context>no conformance requirements</a>. When a <code id=the-template-element:the-template-element-13><a href=#the-template-element>template</a></code> element
  is created, the user agent must run the following steps to establish the <a href=#template-contents id=the-template-element:template-contents-4>template
  contents</a>:</p>

  <ol><li><p>Let <var>doc</var> be the <code id=the-template-element:the-template-element-14><a href=#the-template-element>template</a></code> element's <a id=the-template-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a href=#appropriate-template-contents-owner-document id=the-template-element:appropriate-template-contents-owner-document>appropriate template contents owner
   document</a>.<li><p>Create a <code id=the-template-element:documentfragment-5><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> object whose <a id=the-template-element:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is
   <var>doc</var> and <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=the-template-element:concept-documentfragment-host data-x-internal=concept-documentfragment-host>host</a> is the
   <code id=the-template-element:the-template-element-15><a href=#the-template-element>template</a></code> element.<li><p>Set the <code id=the-template-element:the-template-element-16><a href=#the-template-element>template</a></code> element's <a href=#template-contents id=the-template-element:template-contents-5>template contents</a> to the newly
   created <code id=the-template-element:documentfragment-6><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> object.</ol>

  <p>A <code id=the-template-element:document><a href=dom.html#document>Document</a></code> <var>doc</var>'s <dfn id=appropriate-template-contents-owner-document>appropriate template contents owner
  document</dfn> is the <code id=the-template-element:document-2><a href=dom.html#document>Document</a></code> returned by the following algorithm:</p>

  <ol><li>
    <p>If <var>doc</var> is not a <code id=the-template-element:document-3><a href=dom.html#document>Document</a></code> created by this algorithm, then:</p>

    <ol><li>
      <p>If <var>doc</var> does not yet have an <dfn id=associated-inert-template-document>associated inert template document</dfn>,
      then:</p>

      <ol><li><p>Let <var>new doc</var> be a new <code id=the-template-element:document-4><a href=dom.html#document>Document</a></code> (whose <a href=document-sequences.html#concept-document-bc id=the-template-element:concept-document-bc>browsing context</a> is null). This is "a
       <code id=the-template-element:document-5><a href=dom.html#document>Document</a></code> created by this algorithm" for the purposes of the step above.<li><p>If <var>doc</var> is an <a href=https://dom.spec.whatwg.org/#html-document id=the-template-element:html-documents data-x-internal=html-documents>HTML document</a>, mark
       <var>new doc</var> as an <a href=https://dom.spec.whatwg.org/#html-document id=the-template-element:html-documents-2 data-x-internal=html-documents>HTML document</a>
       also.<li><p>Set <var>doc</var>'s <a href=#associated-inert-template-document id=the-template-element:associated-inert-template-document>associated inert template document</a> to <var>new doc</var>.</ol>
     <li><p>Set <var>doc</var> to <var>doc</var>'s <a href=#associated-inert-template-document id=the-template-element:associated-inert-template-document-2>associated inert
     template document</a>.</ol>

    <p class=note>Each <code id=the-template-element:document-6><a href=dom.html#document>Document</a></code> not created by this algorithm thus gets a single
    <code id=the-template-element:document-7><a href=dom.html#document>Document</a></code> to act as its proxy for owning the <a href=#template-contents id=the-template-element:template-contents-6>template contents</a> of all
    its <code id=the-template-element:the-template-element-17><a href=#the-template-element>template</a></code> elements, so that they aren't in a <a id=the-template-element:browsing-context href=document-sequences.html#browsing-context>browsing context</a> and
    thus remain inert (e.g. scripts do not run). Meanwhile, <code id=the-template-element:the-template-element-18><a href=#the-template-element>template</a></code> elements inside
    <code id=the-template-element:document-8><a href=dom.html#document>Document</a></code> objects that <em>are</em> created by this algorithm just reuse the same
    <code id=the-template-element:document-9><a href=dom.html#document>Document</a></code> owner for their contents.</p>
   <li><p>Return <var>doc</var>.</ol>

  <p id=template-adopting-steps>The <a href=https://dom.spec.whatwg.org/#concept-node-adopt-ext id=the-template-element:concept-node-adopt-ext data-x-internal=concept-node-adopt-ext>adopting steps</a>
  (with <var>node</var> and <var>oldDocument</var> as parameters) for <code id=the-template-element:the-template-element-19><a href=#the-template-element>template</a></code> elements
  are the following:</p>

  <ol><li>
    <p>Let <var>doc</var> be <var>node</var>'s <a id=the-template-element:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s
    <a href=#appropriate-template-contents-owner-document id=the-template-element:appropriate-template-contents-owner-document-2>appropriate template contents owner document</a>.</p>

    <p class=note><var>node</var>'s <a id=the-template-element:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is the <code id=the-template-element:document-10><a href=dom.html#document>Document</a></code> object
    that <var>node</var> was just adopted <em>into</em>.</p>
   <li><p><a href=https://dom.spec.whatwg.org/#concept-node-adopt id=the-template-element:concept-node-adopt data-x-internal=concept-node-adopt>Adopt</a> <var>node</var>'s
   <a href=#template-contents id=the-template-element:template-contents-7>template contents</a> (a <code id=the-template-element:documentfragment-7><a data-x-internal=documentfragment href=https://dom.spec.whatwg.org/#interface-documentfragment>DocumentFragment</a></code> object) into <var>doc</var>.</ol>

  <p>The <dfn data-dfn-for=HTMLTemplateElement id=dom-template-content data-dfn-type=attribute><code>content</code></dfn> getter steps are to return
  <code id=the-template-element:the-template-element-20><a href=#the-template-element>template</a></code>'s <a href=#template-contents id=the-template-element:template-contents-8>template contents</a>, if the <a href=#template-contents id=the-template-element:template-contents-9>template contents</a> is
  not a <code id=the-template-element:shadowroot><a data-x-internal=shadowroot href=https://dom.spec.whatwg.org/#interface-shadowroot>ShadowRoot</a></code> node; otherwise null.</p>

  <p>The <dfn data-dfn-for=HTMLTemplateElement id=dom-template-shadowrootmode data-dfn-type=attribute><code>shadowRootMode</code></dfn> IDL attribute must
  <a id=the-template-element:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-template-element:attr-template-shadowrootmode-3><a href=#attr-template-shadowrootmode>shadowrootmode</a></code> content
  attribute, <a id=the-template-element:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <p class=note>The <a href=#dom-template-shadowrootcustomelementregistry id=the-template-element:dom-template-shadowrootcustomelementregistry>shadowRootCustomElementRegistry</a> IDL
  attribute intentionally does not have a boolean type so it can be extended.</p>

  <hr>

  <p>The <a href=https://dom.spec.whatwg.org/#concept-node-clone-ext id=the-template-element:concept-node-clone-ext data-x-internal=concept-node-clone-ext>cloning steps</a> for <code id=the-template-element:the-template-element-21><a href=#the-template-element>template</a></code>
  elements given <var>node</var>, <var>copy</var>, and <var>subtree</var> are:</p>

  <ol><li><p>If <var>subtree</var> is false, then return.<li><p>For each <var>child</var> of <var>node</var>'s <a href=#template-contents id=the-template-element:template-contents-10>template contents</a>'s <a href=https://dom.spec.whatwg.org/#concept-tree-child id=the-template-element:concept-tree-child data-x-internal=concept-tree-child>children</a>, in <a id=the-template-element:tree-order href=https://dom.spec.whatwg.org/#concept-tree-order data-x-internal=tree-order>tree order</a>: <a href=https://dom.spec.whatwg.org/#concept-node-clone id=the-template-element:concept-node-clone data-x-internal=concept-node-clone>clone a node</a> given <var>child</var> with <a href=https://dom.spec.whatwg.org/#clone-a-node-document id=the-template-element:concept-node-clone-document data-x-internal=concept-node-clone-document><i>document</i></a> set to <var>copy</var>'s
   <a href=#template-contents id=the-template-element:template-contents-11>template contents</a>'s <a id=the-template-element:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, <a href=https://dom.spec.whatwg.org/#clone-a-node-subtree id=the-template-element:concept-node-clone-subtree data-x-internal=concept-node-clone-subtree><i>subtree</i></a> set to true, and <a href=https://dom.spec.whatwg.org/#clone-a-node-parent id=the-template-element:concept-node-clone-parent data-x-internal=concept-node-clone-parent><i>parent</i></a> set to <var>copy</var>'s <a href=#template-contents id=the-template-element:template-contents-12>template
   contents</a>.</ol>

  

  <div class=example>

   <p>In this example, a script populates a table four-column with data from a data structure, using
   a <code id=the-template-element:the-template-element-22><a href=#the-template-element>template</a></code> to provide the element structure instead of manually generating the
   structure from markup.</p>

   <pre><code class='html'><c- cp>&lt;!DOCTYPE html&gt;</c->
<c- p>&lt;</c-><c- f>html</c-> <c- e>lang</c-><c- o>=</c-><c- s>&apos;en&apos;</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>title</c-><c- p>&gt;</c->Cat data<c- p>&lt;/</c-><c- f>title</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- c1>// Data is hard-coded here, but could come from the server</c->
 <c- a>var</c-> data <c- o>=</c-> <c- p>[</c->
   <c- p>{</c-> name<c- o>:</c-> <c- t>&apos;Pillar&apos;</c-><c- p>,</c-> color<c- o>:</c-> <c- t>&apos;Ticked Tabby&apos;</c-><c- p>,</c-> sex<c- o>:</c-> <c- t>&apos;Female (neutered)&apos;</c-><c- p>,</c-> legs<c- o>:</c-> <c- mf>3</c-> <c- p>},</c->
   <c- p>{</c-> name<c- o>:</c-> <c- t>&apos;Hedral&apos;</c-><c- p>,</c-> color<c- o>:</c-> <c- t>&apos;Tuxedo&apos;</c-><c- p>,</c-> sex<c- o>:</c-> <c- t>&apos;Male (neutered)&apos;</c-><c- p>,</c-> legs<c- o>:</c-> <c- mf>4</c-> <c- p>},</c->
 <c- p>];</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>table</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>thead</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Name <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Color <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Sex <c- p>&lt;</c-><c- f>th</c-><c- p>&gt;</c->Legs
 <c- p>&lt;</c-><c- f>tbody</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>template</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;row&quot;</c-><c- p>&gt;</c->
   <c- p>&lt;</c-><c- f>tr</c-><c- p>&gt;&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>td</c-><c- p>&gt;&lt;</c-><c- f>td</c-><c- p>&gt;</c->
  <c- p>&lt;/</c-><c- f>template</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>table</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
 <c- a>var</c-> template <c- o>=</c-> document<c- p>.</c->querySelector<c- p>(</c-><c- t>&apos;#row&apos;</c-><c- p>);</c->
 <c- k>for</c-> <c- p>(</c-><c- a>var</c-> i <c- o>=</c-> <c- mf>0</c-><c- p>;</c-> i <c- o>&lt;</c-> data<c- p>.</c->length<c- p>;</c-> i <c- o>+=</c-> <c- mf>1</c-><c- p>)</c-> <c- p>{</c->
   <c- a>var</c-> cat <c- o>=</c-> data<c- p>[</c->i<c- p>];</c->
   <c- a>var</c-> clone <c- o>=</c-> template<c- p>.</c->content<c- p>.</c->cloneNode<c- p>(</c-><c- kc>true</c-><c- p>);</c->
   <c- a>var</c-> cells <c- o>=</c-> clone<c- p>.</c->querySelectorAll<c- p>(</c-><c- t>&apos;td&apos;</c-><c- p>);</c->
   cells<c- p>[</c-><c- mf>0</c-><c- p>].</c->textContent <c- o>=</c-> cat<c- p>.</c->name<c- p>;</c->
   cells<c- p>[</c-><c- mf>1</c-><c- p>].</c->textContent <c- o>=</c-> cat<c- p>.</c->color<c- p>;</c->
   cells<c- p>[</c-><c- mf>2</c-><c- p>].</c->textContent <c- o>=</c-> cat<c- p>.</c->sex<c- p>;</c->
   cells<c- p>[</c-><c- mf>3</c-><c- p>].</c->textContent <c- o>=</c-> cat<c- p>.</c->legs<c- p>;</c->
   template<c- p>.</c->parentNode<c- p>.</c->appendChild<c- p>(</c->clone<c- p>);</c->
 <c- p>}</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>

   <p>This example uses <code id=the-template-element:dom-node-clonenode><a data-x-internal=dom-node-clonenode href=https://dom.spec.whatwg.org/#dom-node-clonenode>cloneNode()</a></code> on the
   <code id=the-template-element:the-template-element-23><a href=#the-template-element>template</a></code>'s contents; it could equivalently have used <code id=the-template-element:dom-document-importnode><a data-x-internal=dom-document-importnode href=https://dom.spec.whatwg.org/#dom-document-importnode>document.importNode()</a></code>, which does the same thing. The
   only difference between these two APIs is when the <a id=the-template-element:node-document-6 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is updated: with
   <code id=the-template-element:dom-node-clonenode-2><a data-x-internal=dom-node-clonenode href=https://dom.spec.whatwg.org/#dom-node-clonenode>cloneNode()</a></code> it is updated when the nodes are appended
   with <code id=the-template-element:dom-node-appendchild-2><a data-x-internal=dom-node-appendchild href=https://dom.spec.whatwg.org/#dom-node-appendchild>appendChild()</a></code>, with <code id=the-template-element:dom-document-importnode-2><a data-x-internal=dom-document-importnode href=https://dom.spec.whatwg.org/#dom-document-importnode>document.importNode()</a></code> it is updated when the nodes are
   cloned.</p>

  </div>



  

  <h5 id=template-XSLT-XPath><span class=secno>4.12.3.1</span> Interaction of <code id=template-XSLT-XPath:the-template-element><a href=#the-template-element>template</a></code> elements with XSLT and XPath<a href=#template-XSLT-XPath class=self-link></a></h5>

  <p><i>This section is non-normative.</i></p>

  <p>This specification does not define how XSLT and XPath interact with the <code id=template-XSLT-XPath:the-template-element-2><a href=#the-template-element>template</a></code>
  element. However, in the absence of another specification actually defining this, here are some
  guidelines for implementers, which are intended to be consistent with other processing described
  in this specification:</p>

  <ul><li><p>An XSLT processor based on an XML parser that acts <a href=xhtml.html#xml-parser id=template-XSLT-XPath:xml-parser>as described
   in this specification</a> needs to act as if <code id=template-XSLT-XPath:the-template-element-3><a href=#the-template-element>template</a></code> elements contain as
   descendants their <a href=#template-contents id=template-XSLT-XPath:template-contents>template contents</a> for the purposes of the transform.<li><p>An XSLT processor that outputs a DOM needs to ensure that nodes that would go into a
   <code id=template-XSLT-XPath:the-template-element-4><a href=#the-template-element>template</a></code> element are instead placed into the element's <a href=#template-contents id=template-XSLT-XPath:template-contents-2>template
   contents</a>.<li><p>XPath evaluation using the XPath DOM API when applied to a <code id=template-XSLT-XPath:document><a href=dom.html#document>Document</a></code> parsed
   using the <a id=template-XSLT-XPath:html-parser href=parsing.html#html-parser>HTML parser</a> or the <a id=template-XSLT-XPath:xml-parser-2 href=xhtml.html#xml-parser>XML parser</a> described in this specification
   needs to ignore <a href=#template-contents id=template-XSLT-XPath:template-contents-3>template contents</a>.</p>
  </ul>

  



  <h4 id=the-slot-element><span class=secno>4.12.4</span> The <dfn data-dfn-type=element><code>slot</code></dfn> element<a href=#the-slot-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot title="The <slot> HTML element—part of the Web Components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.">Element/slot</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>63+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>53+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement title="The HTMLSlotElement interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML <slot> element.">HTMLSlotElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>63+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>53+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-slot-element:concept-element-categories>Categories</a>:<dd><a id=the-slot-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-slot-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dt><a href=dom.html#concept-element-contexts id=the-slot-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-slot-element:phrasing-content-2-2 href=dom.html#phrasing-content-2>phrasing content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-slot-element:concept-element-content-model>Content model</a>:<dd><a id=the-slot-element:transparent href=dom.html#transparent>Transparent</a><dt><a href=dom.html#concept-element-tag-omission id=the-slot-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-slot-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-slot-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-slot-element:attr-slot-name><a href=#attr-slot-name>name</a></code> —  Name of shadow tree slot
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-slot-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-slot>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-slot>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-slot-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlslotelement' data-dfn-type='interface'><c- g>HTMLSlotElement</c-></dfn> : <a id='the-slot-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-slot-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-slot-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-slot-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLSlotElement' id='dom-slot-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;
  <c- b>sequence</c->&lt;<c- n>Node</c->&gt; <a href='#dom-slot-assignednodes' id='the-slot-element:dom-slot-assignednodes'><c- g>assignedNodes</c-></a>(<c- b>optional</c-> <a href='#assignednodesoptions' id='the-slot-element:assignednodesoptions'><c- n>AssignedNodesOptions</c-></a> <c- g>options</c-> = {});
  <c- b>sequence</c->&lt;<c- n>Element</c->&gt; <a href='#dom-slot-assignedelements' id='the-slot-element:dom-slot-assignedelements'><c- g>assignedElements</c-></a>(<c- b>optional</c-> <a href='#assignednodesoptions' id='the-slot-element:assignednodesoptions-2'><c- n>AssignedNodesOptions</c-></a> <c- g>options</c-> = {});
  <c- b>undefined</c-> <a href='#dom-slot-assign' id='the-slot-element:dom-slot-assign'><c- g>assign</c-></a>((<a id='the-slot-element:element' href='https://dom.spec.whatwg.org/#interface-element' data-x-internal='element'><c- n>Element</c-></a> <c- b>or</c-> <a id='the-slot-element:text' href='https://dom.spec.whatwg.org/#interface-text' data-x-internal='text'><c- n>Text</c-></a>)... <c- g>nodes</c->);
};

<c- b>dictionary</c-> <dfn id='assignednodesoptions' data-dfn-type='dictionary'><c- g>AssignedNodesOptions</c-></dfn> {
  <c- b>boolean</c-> <dfn data-dfn-for='AssignedNodeOptions' id='dom-assignednodesoptions-flatten' data-dfn-type='dict-member'><c- g>flatten</c-></dfn> = <c- b>false</c->;
};</code></pre>
   </dl>

  <p>The <code id=the-slot-element:the-slot-element><a href=#the-slot-element>slot</a></code> element defines a <a href=https://dom.spec.whatwg.org/#concept-slot id=the-slot-element:concept-slot data-x-internal=concept-slot>slot</a>. It is
  typically used in a <a id=the-slot-element:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a>. A <code id=the-slot-element:the-slot-element-2><a href=#the-slot-element>slot</a></code> element <a id=the-slot-element:represents href=dom.html#represents>represents</a>
  its <a id=the-slot-element:assigned-nodes href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>, if any, and its contents otherwise.</p>

  <p>The <dfn data-dfn-for=slot id=attr-slot-name data-dfn-type=element-attr><code>name</code></dfn> content
  attribute may contain any string value. It represents a <a href=https://dom.spec.whatwg.org/#concept-slot id=the-slot-element:concept-slot-2 data-x-internal=concept-slot>slot</a>'s
  <a href=https://dom.spec.whatwg.org/#slot-name id=the-slot-element:slot-name data-x-internal=slot-name>name</a>.</p>

  <p class=note>The <code id=the-slot-element:attr-slot-name-2><a href=#attr-slot-name>name</a></code> attribute is used to <a href=https://dom.spec.whatwg.org/#assign-a-slot id=the-slot-element:assign-a-slot data-x-internal=assign-a-slot>assign slots</a> to other elements: a <code id=the-slot-element:the-slot-element-3><a href=#the-slot-element>slot</a></code> element with a
  <code id=the-slot-element:attr-slot-name-3><a href=#attr-slot-name>name</a></code> attribute creates a named <a href=https://dom.spec.whatwg.org/#concept-slot id=the-slot-element:concept-slot-3 data-x-internal=concept-slot>slot</a> to which any element is <a href=https://dom.spec.whatwg.org/#assign-a-slot id=the-slot-element:assign-a-slot-2 data-x-internal=assign-a-slot>assigned</a> if that element has a <code id=the-slot-element:attr-slot><a href=dom.html#attr-slot>slot</a></code> attribute whose
  value matches that <code id=the-slot-element:attr-slot-name-4><a href=#attr-slot-name>name</a></code> attribute's value, and the
  <code id=the-slot-element:the-slot-element-4><a href=#the-slot-element>slot</a></code> element is a child of the <a id=the-slot-element:shadow-tree-2 href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a> whose <a id=the-slot-element:root href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>'s
  <a href=https://dom.spec.whatwg.org/#concept-documentfragment-host id=the-slot-element:concept-documentfragment-host data-x-internal=concept-documentfragment-host>host</a> has that corresponding <code id=the-slot-element:attr-slot-2><a href=dom.html#attr-slot>slot</a></code> attribute value.</p>

  <dl class=domintro><dt><code><var>slot</var>.<a href=#dom-slot-name id=dom-slot-name-dev>name</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/name title="The name property of the HTMLSlotElement interface returns or sets the slot name. A slot is a placeholder inside a web component that users can fill with their own markup.">HTMLSlotElement/name</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>63+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>53+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>Can be used to get and set <var>slot</var>'s <a href=https://dom.spec.whatwg.org/#slot-name id=the-slot-element:slot-name-2 data-x-internal=slot-name>name</a>.<dt><code><var>slot</var>.<a href=#dom-slot-assignednodes id=dom-slot-assignednodes-dev>assignedNodes</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedNodes title="The assignedNodes() method of the HTMLSlotElement interface returns a sequence of the nodes assigned to this slot.">HTMLSlotElement/assignedNodes</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>63+</span></span><span class="safari yes"><span>Safari</span><span>10+</span></span><span class="chrome yes"><span>Chrome</span><span>53+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>Returns <var>slot</var>'s <a id=the-slot-element:assigned-nodes-2 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>.<dt><code><var>slot</var>.<a href=#dom-slot-assignednodes id=the-slot-element:dom-slot-assignednodes-2>assignedNodes</a>({ flatten: true })</code><dd>Returns <var>slot</var>'s <a id=the-slot-element:assigned-nodes-3 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>, if any, and <var>slot</var>'s children
   otherwise, and does the same for any <code id=the-slot-element:the-slot-element-5><a href=#the-slot-element>slot</a></code> elements encountered therein, recursively,
   until there are no <code id=the-slot-element:the-slot-element-6><a href=#the-slot-element>slot</a></code> elements left.<dt><code><var>slot</var>.<a href=#dom-slot-assignedelements id=dom-slot-assignedelements-dev>assignedElements</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assignedElements title="The assignedElements() method of the HTMLSlotElement interface returns a sequence of the elements assigned to this slot (and no other nodes).">HTMLSlotElement/assignedElements</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>66+</span></span><span class="safari yes"><span>Safari</span><span>12.1+</span></span><span class="chrome yes"><span>Chrome</span><span>65+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><dd>Returns <var>slot</var>'s <a id=the-slot-element:assigned-nodes-4 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>, limited to elements.<dt><code><var>slot</var>.<a href=#dom-slot-assignedelements id=the-slot-element:dom-slot-assignedelements-2>assignedElements</a>({ flatten: true })</code><dd>Returns the same as <code id=the-slot-element:dom-slot-assignednodes-3><a href=#dom-slot-assignednodes>assignedNodes({ flatten: true
   })</a></code>, limited to elements.<dt><code><var>slot</var>.<a href=#dom-slot-assign id=the-slot-element:dom-slot-assign-2>assign</a>(...<var>nodes</var>)</code><dd><p>Sets <var>slot</var>'s <a href=#manually-assigned-nodes id=the-slot-element:manually-assigned-nodes>manually assigned nodes</a> to the given
   <var>nodes</var>.</dl>

  <p>The <code id=the-slot-element:the-slot-element-7><a href=#the-slot-element>slot</a></code> element has <dfn data-dfn-for=HTMLSlotElement id=manually-assigned-nodes data-export="">manually assigned
  nodes</dfn>, which is an <a href=https://infra.spec.whatwg.org/#ordered-set id=the-slot-element:set data-x-internal=set>ordered set</a> of <a href=https://dom.spec.whatwg.org/#concept-slotable id=the-slot-element:slottable data-x-internal=slottable>slottables</a> set by <code id=the-slot-element:dom-slot-assign-3><a href=#dom-slot-assign>assign()</a></code>.
  This set is initially empty.</p>

  <p class=note>The <a href=#manually-assigned-nodes id=the-slot-element:manually-assigned-nodes-2>manually assigned nodes</a> set can be implemented using weak
  references to the <a href=https://dom.spec.whatwg.org/#concept-slotable id=the-slot-element:slottable-2 data-x-internal=slottable>slottables</a>, because this set is not
  directly accessible from script.</p>

  <p>The <dfn data-dfn-for=HTMLSlotElement id=dom-slot-assignednodes data-dfn-type=method><code>assignedNodes(<var>options</var>)</code></dfn> method steps
  are:</p>

  <ol><li><p>If <var>options</var>["<code id=the-slot-element:dom-assignednodesoptions-flatten><a href=#dom-assignednodesoptions-flatten>flatten</a></code>"] is
   false, then return <a id=the-slot-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-slot-element:assigned-nodes-5 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>.<li><p>Return the result of <a id=the-slot-element:finding-flattened-slottables href=https://dom.spec.whatwg.org/#find-flattened-slotables data-x-internal=finding-flattened-slottables>finding flattened slottables</a> with
   <a id=the-slot-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.</ol>

  <p>The <dfn data-dfn-for=HTMLSlotElement id=dom-slot-assignedelements data-dfn-type=method><code>assignedElements(<var>options</var>)</code></dfn> method
  steps are:</p>

  <ol><li><p>If <var>options</var>["<code id=the-slot-element:dom-assignednodesoptions-flatten-2><a href=#dom-assignednodesoptions-flatten>flatten</a></code>"] is
   false, then return <a id=the-slot-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-slot-element:assigned-nodes-6 href=https://dom.spec.whatwg.org/#slot-assigned-nodes data-x-internal=assigned-nodes>assigned nodes</a>, filtered to contain only
   <code id=the-slot-element:element-2><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> nodes.<li><p>Return the result of <a id=the-slot-element:finding-flattened-slottables-2 href=https://dom.spec.whatwg.org/#find-flattened-slotables data-x-internal=finding-flattened-slottables>finding flattened slottables</a> with <a id=the-slot-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>,
   filtered to contain only <code id=the-slot-element:element-3><a data-x-internal=element href=https://dom.spec.whatwg.org/#interface-element>Element</a></code> nodes.</ol>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/assign title="The assign() method of the HTMLSlotElement interface sets the slot's manually assigned nodes to an ordered set of slottables. The manually assigned nodes set is initially empty until nodes are assigned using assign().">HTMLSlotElement/assign</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>92+</span></span><span class="safari yes"><span>Safari</span><span>16.4+</span></span><span class="chrome yes"><span>Chrome</span><span>86+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>86+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLSlotElement id=dom-slot-assign data-dfn-type=method><code>assign(...<var>nodes</var>)</code></dfn> method steps are:</p>

  <ol><li><p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-slot-element:list-iterate data-x-internal=list-iterate>For each</a> <var>node</var> of <a id=the-slot-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
   <a href=#manually-assigned-nodes id=the-slot-element:manually-assigned-nodes-3>manually assigned nodes</a>, set <var>node</var>'s <a id=the-slot-element:manual-slot-assignment href=https://dom.spec.whatwg.org/#slottable-manual-slot-assignment data-x-internal=manual-slot-assignment>manual slot assignment</a>
   to null.<li><p>Let <var>nodesSet</var> be a new <a href=https://infra.spec.whatwg.org/#ordered-set id=the-slot-element:set-2 data-x-internal=set>ordered set</a>.<li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-slot-element:list-iterate-2 data-x-internal=list-iterate>For each</a> <var>node</var> of <var>nodes</var>:</p>

    <ol><li><p>If <var>node</var>'s <a id=the-slot-element:manual-slot-assignment-2 href=https://dom.spec.whatwg.org/#slottable-manual-slot-assignment data-x-internal=manual-slot-assignment>manual slot assignment</a> refers to a <a href=#the-slot-element id=the-slot-element:the-slot-element-8>slot</a>,
     then remove <var>node</var> from that <a href=#the-slot-element id=the-slot-element:the-slot-element-9>slot</a>'s
     <a href=#manually-assigned-nodes id=the-slot-element:manually-assigned-nodes-4>manually assigned nodes</a>.<li><p>Set <var>node</var>'s <a id=the-slot-element:manual-slot-assignment-3 href=https://dom.spec.whatwg.org/#slottable-manual-slot-assignment data-x-internal=manual-slot-assignment>manual slot assignment</a> to <a id=the-slot-element:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<li><p><a href=https://infra.spec.whatwg.org/#set-append id=the-slot-element:set-append data-x-internal=set-append>Append</a> <var>node</var> to <var>nodesSet</var>.</ol>
   <li><p>Set <a id=the-slot-element:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#manually-assigned-nodes id=the-slot-element:manually-assigned-nodes-5>manually assigned nodes</a> to
   <var>nodesSet</var>.<li><p>Run <a id=the-slot-element:assign-slottables-for-a-tree href=https://dom.spec.whatwg.org/#assign-slotables-for-a-tree data-x-internal=assign-slottables-for-a-tree>assign slottables for a tree</a> for <a id=the-slot-element:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s
   <a id=the-slot-element:root-2 href=https://dom.spec.whatwg.org/#concept-tree-root data-x-internal=root>root</a>.</ol>


  <nav><a href=interactive-elements.html>← 4.11 Interactive elements</a> — <a href=./>Table of Contents</a> — <a href=canvas.html>4.12.5 The canvas element →</a></nav>
